Need help with some CSS code for a couple of items.

  • skm27 · Member ·

    Hi

    I have had some success with CSS coding for my blog but the following items remain a challenge for me. If anyone could assist that would be greatly appreciated.

    Oxygen theme.

    Blog is http://www.beerandcroissants.com

    Thanks in advance. Kerri

    #How do I get bullet points in the relevant areas on the secondary menu e.g. Recent Posts – dot point against Thai Foodie Heaven and other beside Old Fashioned Blog.

    #When I click on About Me from the primary menu, the page title then is in all capitals. How can I change this to Letter case i.e. About Me not ABOUT ME

    #How can I increase the font size for this page of information also (About me content)

    #When I click on Travel with me the blog titles come up in all lower case. How can I get this to be letter case. e.g. Thai Foodie Heaven not thai foodie heaven

    #Is it possible on the pages to remove the tertiary menu and have full width bog pages? e.g. When I click on the Thai Foodie Heaven blog post I get the same three column display. Can the right hand side menu be removed on this page (would then want to do this on all other pages except for home page. About Me is already full width. I understand that this is possible because About Me is a static page. Can I do this for category pages?

    #How do I reduce the size of the black box at the end of the home page

    The blog I need help with is: (visible only to logged in users)

  • dannywellman · Member ·

    Hello there!

    Well, I think we can get you going on most of your requests.
    Here is some CSS code that will fix some of the things on your list:

    I’ve commented before each section on what it does. Hopefully it will come across OK. I’ve been fighting with the forums dropping some code after slashes…. :)
     

    /*Add a bullet before the dates of your most recent posts in the menu*/
.post-date:before {
content: "\2022  ";
}

/*Reset the headers to regular text (not all lowercase or all uppercase)*/
.entry-title {
	text-transform: capitalize !important;
}

/*To increase the size of the text in the content areas*/
.entry-content p {
	font-size: 29px;
}

/*Reduce the size of the padding in the footer boxes*/
.site-footer {
	padding: 1em !important;
}

    For getting the individual blog posts to drop the menus on the left and right it’s a bit trickier. I don’t believe there is a global setting that would turn them off just for the blogs but leave them there for the rest of the pages. You can turn them off with CSS, but you would have to do it for every page. That would probably be a headache.

    Good luck and let me know if it works for you or not!

  • dannywellman · Member ·

    Hooray! It looks like the code came through OK! Huzzah!

    Anyway, have a crack at the code I posted and switch up the values to get what you want (especially the font size…29 is pretty big). :)

    Let me know if you have any questions!

  • skm27 · Member ·

    Hi

    Thank you so much for your help.

    I can’t seem to get the bullet points to work. I may not have explained myself correctly. On the home page, in the black secondary menu the following is listed.

    TOP POSTS AND PAGES
    Home
    5 star dining…..
    About me

    RECENT POSTS
    5 star dining….
    Thai foodie heaven
    Old fashioned blog

    CATEGORIES
    Travel with me
    Eat with me
    etc

    I want to put bullet points beside the items under the main areas. The code that you gave me doesn’t do this and I can’t actually see where it made any changes ? Sorry.

    Also on the header for About Me, the capitalisation code worked. I need this to also be in colour (color) #369 but I added this in and it didn’t work either. Is there a trick to adding this code ?

    thank you so much again for what you have already provided for me.

  • skm27 · Member ·

    RE your comment about hiding the menus for every page….

    I have the basic code that sort of works…. This removes the secondary and tertiary menus completely from the category pages (which is great) but also from the home page (which is not so great) How do I tell it I just want it on the pages (i.e. if it was just for the Travel with me page, how do I tell it this?)

    #content {
    margin-right: 1% !important;
    }

    #tertiary {
    display: none;
    }

    #secondary {
    display: none;
    }

    Also with the code above, the text spreads out but the photos in the featured image on the post page don’t and the breadcrumbs (categories) come out off the photo. I need to stretch them somehow.

  • thesacredpath · Member ·

    Hi, the following uses the category-travel-with-me CSS body class to specifically target that category page. It is found in the opening HTML body tag on that page.

    I’ve combined the tertiary and secondary rules. 

    .category-travel-with-me #tertiary, .category-travel-with-me #secondary {
    display: none;
}
.category-travel-with-me #content {
    margin-right: 1%;
}

    To make the featured images larger on the category-travel-with-me page, you can use the following. 

    .category-travel-with-me .featured-image img {
    width: 100%;
}

    If you wished to do this change on all category, archive and tag pages, then you can replace all instances of .category-travel-with-me with .archive.

  • skm27 · Member ·

    Hi

    Thanks. The photo width and margin code works but the removal of the secondary and tertiary does not. It simply puts the blog text over the top of the tertiary menu on the right hand side and leaves the secondary there intact. ?

    thanks

  • thesacredpath · Member ·

    Hmmm, I missed a left margin. Try the following, which gets rid of both sidebars and takes the content full width. 

    .category-travel-with-me #tertiary, .category-travel-with-me #secondary {
    display: none;
}
.category-travel-with-me #content {
    margin-right: 1%;
	margin-left: 0;
}
  • dannywellman · Member ·

    Hello!
    I can see the bullet points on your page when I highlight the text. I think the issue is that the bullets are basically black on a black background. If you add the following CSS you can see the extra text and the bullets show up.

    .page-template-showcase-php #secondary {
     color: white;
}

    Also, I think I figured out how to put the dates on their own line with the bullet in front of the date.

    .post-date:before {
content: "\2022  ";
}
.post-date {
	display:block;
}

    Give those a shot!

  • skm27 · Member ·

    thesacredpath – happiness engineer – thanks very much !!

  • skm27 · Member ·

    thanks dannywellman – perfect. I actually decided to take the dates out of the menu so just adapted the code. Really appreciate your help.

  • dannywellman · Member ·

    Kerri, I’m glad we could help. Have a great weekend!

  • The topic ‘Need help with some CSS code for a couple of items.’ is closed to new replies.