Modularity Lite – Getting rid of black box around footer, tags, and menu

  • simplehomerecording · Member ·

    Hello,

    Is there a way to use CSS to get rid of the black box that is around the “Blog at WordPress.com | The Modularity Lite Theme” footer, the post date/categories/tags section at the bottom of each post, and my top navigation links? I would like for those to just be text without any flat-color box behind them.

    Ideally I’d like to get rid of the boxes for all of them, but the most important to me is the post date/categories/tags.

    And as a bonus, how can I have my header image link back to the homepage? I did some searching for that ability with the Modularity Lite theme and found that it should be possible by using a large link ‘box’ that takes up the same area as the header image, but when I tried the code, I couldn’t get it to work.

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

  • simplehomerecording · Member ·

    Sorry for all the questions, but I just remembered another thing. Is it possible to move the top navigation links so they’re right below the header image instead of right above it?

  • simplehomerecording · Member ·

    Once again, I’m sorry to be a pain, but now that I’ve changed my background image to something lighter, I’ve noticed a lot more things.

    Is there a way to get rid of the horizontal black lines below sidebar headings and between sidebar links?

    Also, when I hover over any sidebar links excluding the Categories section, the background behind the link turns black. However, the Categories section doesn’t (it’s treated differently and I’m using custom CSS to have those links white instead of the default blue, and for their spacing to match the other sections). Is there a way to either have the Categories ones have their background react the same way when hovered over, or to have none of the links have the background do that? I’m a stickler for consistency.

  • hallluke · Member ·

    Here’s how to remove the background block colours:

    #footer-wrap,
#top div.main-nav,
.postmetadata {
  background:transparent;
}
  • simplehomerecording · Member ·

    Hi hallluke,

    Thanks for your suggestion. Unfortunately it does not seem to change anything, and when I add it to my CSS, “#footer-wrap” and “#top div” turn red, which I believe means they are not valid style elements for this theme, correct?

  • thesacredpath · Member ·

    For the background hover color in the widgets, add the following and then adjust the color as desired. If you wish no background change on hover, substitute none for the color code I have provided. 

    #sidebar ul li a:hover, ul.txt li:hover {
    background: #cc0000;
}

    To get rid of the lines below the widget titles, add the following. 

    h3.sub, h2.sub {
border: none;
}

    I tried the code @hallluke gave above for the nav and footer area as he has it, and also separately as below and both worked for me.

    #footer-wrap {
    background: none;
}
#top div.main-nav {
    background: none;
}

    If you are still having issues with that after trying what I have above, please let us know.

  • simplehomerecording · Member ·

    Awesome, that helped a lot!

    The widget link ‘hover’ is successfully removed (which means now I don’t have to manually add new category links to my fake “Categories” section when I make new ones!).

    The black blocks around the top navigation bar are now successfully removed as well.

    However, I wasn’t able to get rid of the horizontal lines between widget links (Categories excluded since it behaves differently), and I’d also still love to get rid of the black box around the text at the bottom of each post (with the date, categories, tags, etc.) and the huge footer black box that the encloses the “Blog at WordPress.com. | The Modularity Lite Theme.” text, which looks kind of silly taking up a small amount of room but being inside of a massive black box.

    I’m wondering if maybe some of the other CSS code I have is conflicting with those suggested fixes. Here’s what I already have:

    .byline {
	display: block;
	position: absolute;
	left: -9000px;
}

#sidebar .widget_categories ul li a {
	color: #ffffff;
}

#sidebar .widget_categories ul li {
	margin: 6px 0;
}

#sidebar h3.sub {
	color: #cccccc;
}

#masthead {
	display: none;
}

 {
	float: ;
  • thesacredpath · Member ·

    Ah, I misunderstood and thought you were talking about the widget titles, which also have a bottom border. I had to turn your container to blue so I could see them. Give this a try. 

    #sidebar ul li a, ul.txt li {
	border:none;
}
  • simplehomerecording · Member ·

    Awesome! Thanks so much for your help. I actually did mean both the line below each widget title and the lines in between each link (didn’t realize they were separate elements), so using both bits of code worked great. With the dark background I know they’re barely noticeable, but I’m very particular. :P

  • thesacredpath · Member ·

    No worries about being particular, and you are welcome.

  • The topic ‘Modularity Lite – Getting rid of black box around footer, tags, and menu’ is closed to new replies.