Four newb questions about CSS/WordPress

  • RVDA55

    (@rvda55)


    10 years, 5 months ago

    Hello all!

    I’m reasonably familiar with CSS and am using Dreamweaver. Recently I began exploring WordPress and using a base template I started to style and shape my first WordPress theme.

    Here it is; Test Site

    Now I’ve got a few things I’d like to ask..

    1) I’m trying to get the header site title to become black and and orange as I hover over. All without text decoration. I used the !important thingy but that only worked to get the site title black, the underline doesn’t disappear. Also I had to use ‘Black, Orange,’ etc. instead of color coding because for some reason that didn’t work.

    2) I created some divs in header.php and I styled them but for some reason there is vertical spacing between the divs of about 10 pixels. Instead, the darkgray menu bar should be against the darkred menu bar, and the 10 pixels spacing should be below the dark gray menu bar.

    3) I’m still puzzled as to how I can vertically center the div content of #MenuSearchBar and #BottomMenu which are in header.php. ‘Vertical align center’ doesn’t do anything.

    4) Last, if you click on ‘Hello World’ post for example (or any of the links in the posts/widgets section) the text turns white instead of staying black with the orange hover. As if the white color overrides the ‘visited’ links.

    I’m still struggling to understand why the content in different browsers shift (such as the menu items) and how I can keep them ‘in line’ in all browsers.

    Thanks for any help, appreciated!

    Regards, Rudolf

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    1) I used the !important thingy but that only worked to get the site title black, the underline doesn’t disappear.

    Did you add this CSS:

    header h1 a:hover {
	color: #F90 !important;
	text-decoration: none;
}

    ?

    Thread Starter RVDA55

    (@rvda55)

    10 years, 5 months ago

    Hey, yes I added that, that’s how it is now.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    This CSS is responsible for your missing underline:

    text-decoration: none;

    http://www.w3schools.com/cssref/pr_text_text-decoration.asp

    Thread Starter RVDA55

    (@rvda55)

    10 years, 5 months ago

    Actually that’s exactly what I want, I want the black underline to disappear. Right now it only disappears when you hover over the title.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    Then I guess you just need to apply that “text-decoration: none” style to the non-hover state:

    header h1 a:link {
 text-decoration: none;
}

    Thread Starter RVDA55

    (@rvda55)

    10 years, 5 months ago

    Thanks! That worked. Could you tackle the other issues as well perhaps? 🙂

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    2) There is a margin-top style applied to this div:

    <div class="my_extra_menu_class">

    Set the margin top to zero.

    E.g,

    header .my_extra_menu_class {
 margin-top: 0;
}

    Thread Starter RVDA55

    (@rvda55)

    10 years, 5 months ago

    Dang it, why did I not see that myself. I’m also wanting a 10px space below that so I changed it to;

    .my_extra_menu_class {
	margin-bottom: 10px;
	margin-left: 10px;
	font-size: 0.83em;
	text-transform: uppercase;
}

    Or is that wrong? Because I only see 5 pixels white space instead of 10.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    Try removing the header height style

    Thread Starter RVDA55

    (@rvda55)

    10 years, 5 months ago

    That worked! It looks like most of the time I simly didn’t clean up remnants of other css ‘experiments’ I conducted.

    Just didn’t know what to look for.

    Hey, if you happen to be on a roll, do you know how I can vertically center the div contents of the #MenuSearchBar and #BottomMenu (in header.php as well)?

    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    I can’t find the divs with the IDs of “MenuSearchBar” or “bottomMenu”

    Thread Starter RVDA55

    (@rvda55)

    10 years, 5 months ago

    Weird. This is the site; Test site

    They should be in header.php; <div id=”MenuSearchBar”> and <div id=”BottomMenu”>

    In the css it looks like;

    /*Top menu + search bar*/
    #MenuSearchBar {
    height: 31px;
    background-color: #b70002;
    }
    /*Bottom Menu*/
    #BottomMenu {
    height: 22px;
    background-color: #333;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    I advise you seek support from a CSS-specific forum: http://csscreator.com

    Thread Starter RVDA55

    (@rvda55)

    10 years, 5 months ago

    Allright will head down there.

    Thanks so far for your help.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Four newb questions about CSS/WordPress’ is closed to new replies.