Need help? Check out our Support site, then


Customizing Expound Theme

  1. I have several questions about coding for the Expound theme:

    1) What is the code to center the main navigation menu?
    2) What is the code to use square bullet points for lists within widgets
    3) What is the code to change the text color in the menu and lists within widgets? Sometimes the text/hyper link color changes or cannot be seen when the background color is changed.

    Thank you for your help.
    Mike

    The blog I need help with is interruptingthesilence.com.

  2. 1. This will center your navigation.

    .navigation-main {
        text-align: center;
        height: 40px;
    }
    
    .navigation-main ul {
        display: inline-block;
    }

    2. I see the following in your custom CSS, so you are almost there. Change the left margin you have to perhaps 20px.

    .widget-area .widget ul {
        list-style: square outside none;
        margin-left: 20px;
    }

    3a. Widget links in lists in the sidebar

    .widget-area .widget a {
    color: #CC0000;
    }

    3b. Menu text color (non-hover)

    navigation-main a {
        color: #FFFFFF;
    }

    3c. Menu text color (hover)

    .navigation-main li:hover > a {
    color: #662255
    }

    3d. Current menu item color

    .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
        color: #cc0000;
    }
  3. Thank you very much. Your code worked just right and helped me figure out a couple of other matters. I have now a couple more questions:

    1) The main menu is centered but the drop downs (e.g. Nicene Creed) are also centered. How do I make the drop downs left justified but keep the main menu centered?
    2) I changed the link and hover colors of the featured post. The text is white in a gray background, which I want to keep. The hover color is a lighter gray and makes the white text unreadable. How do I change the text color to black while keeping the lighter gray hover color?

    Thank you for your patience and assistance.

    Mike

  4. You are welcome, and here is the code for your other two questions.

    1. To left align the sub menu items, add the following.

    .navigation-main ul ul a {
    text-align: left;
    }

    2. Hover text color for Continue Reading button.

    .entry-summary .button-primary:hover {
    color: #000000;
    }
  5. warksmuseumnetwork
    Member

    hello, Im having a similar problem - Ive just changed to Expound theme and upgraded to custom design ...
    Im happy with colours I have changed but now the text in widget (recent posts) and links in main texts are now invisible. I cannot find out why they are 'white' and am not sure how to add code to the CSS sheet

    http://greeningmuseums.wordpress.com/
    can you help please Glynis

  6. warksmuseumnetwork
    Member

    update ... sorted ... thanks for the code have worked most of it out now.
    many thanks

  7. Hi Glynis. I hope you were able to make the changes you wanted. I was unable to do it with color changes alone. I made the color changes but then used the CSS code thesacredpath provided to change the color of the text.

    Peace,
    Mike

  8. @thesacredpath, thanks once again for the help. It all worked as I wanted. Based on the codes you provided I was able to figure out the codes for some other changes. I know I have taken much of your time, and i am grateful, but I was wondering if

    1) You would you check the code I figured out and used to make sure it is correct?
    2) Also, I would like to make the hover text for the "Sign me up" button black like you did for the "Continue Reading" but I have not been able to code it correctly and would appreciate your help.

    Thanks very much. I will try not to ask more questions (at least for a while).

    Peace be with you,
    Mike

  9. warksmuseumnetwork
    Member

    many thanks Mike, yes I managed to change things to the way I wanted it by stumbling through the code you and thesacredpath suggested. little by little, step by step its getting there.
    best wishes all

  10. @marshmk, you are welcome, and @warksmuseumnetwork, glad you got your changes made. If you have any further questions, please let us know.

  11. I do have a couple of remaining questions.

    1) I worked out some other coding on my own based on what you had given me. Would you check the code I figured out and used to make sure it is correct?

    2) Also, I would like to make the hover text for the "Sign me up" button black like you did for the "Continue Reading" but I have not been able to code it correctly and would appreciate your help.

    Lastly, a new issue. The menu does not display correctly on mobile devices, http://responsinator.com/?url=www.interruptingthesilence.com.
    I wondered if this is because I centered the menu on the theme. I was unable to code a mobile only left justified menu to see if that fixed the mobile display.

    Again, thank you very much for your help and patience.

    Mike

  12. Mike,

    1. I see no problems with any of your custom CSS, so I think you are good to go.

    2. Let's use the industrial strength CSS. This will take care of all buttons anywhere in the world (ok, not the world, but at least in your site here :) ). You can even remove the other hover button code I gave previously as this covers that one as well.

    button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active, #infinite-handle span {
    color: #000000;
    }

    3. Let's add some @media rules that will hide the normal navigation at 600px in width, which is when the mobile menu appears, and reduce the left/right padding on the menu labels at 650px so they don't go to two lines. Add the following at the very bottom of your custom CSS and see what you think.

    @media screen and (max-width:600px) {.menu-pages-container {
        display:none;
    }
    }
    
    @media screen and (max-width:650px) {.navigation-main ul li a {
        padding-left:5px;
        padding-right:5px;
    }
    }
  13. Wow, that is quite a code for the buttons. I messed and messed with it but could not get it on my own. Thanks so much for your time and help. I am really happy with the way the site looks and could not have done it without you.

    The mobile theme, however, still has some issues. The menu items were corrected but the menu button does not work and the tag line overlaps a bit; http://responsinator.com/?url=www.interruptingthesilence.com.

    Also, I want the hover color on the front page titles to change. I added some code that changes it when you hover over the text or image but it goes back to the original color when you hover over the title/link.

    Thank you very much.
    Mike

  14. The first @media rule I gave you above, change it to the following instead:

    @media screen and (max-width: 600px) {
    .navigation-main ul {
        display: none;
    }
    }

    Option 1: Given you have a very long tagline, the below will hide your tagline/site description at 500px.

    @media screen and (max-width: 500px) {
    .site-description {
        display: none;
    }
    }

    Option 2: This one reduces the top margin on the site title and takes it and the site description higher at 500px, which is where it starts to interfere with the menu.

    @media screen and (max-width: 500px) {
    .site-title {
        margin-top: 75px;
    }
    }

    On the titles, this will do only the front page titles when the titles are hovered.

    .featured-content-secondary .entry-title a:hover {
        color: #CCCCCC;
    }

    This is the "do all the things" rule in the original CSS.

    .site-title a:hover, .entry-title a:hover, .comments-area footer .comment-author a:hover, .widget-area .widget-title a:hover, article:hover .entry-title a:hover, .featured-content-secondary .entry-title a:hover, article:hover .entry-title a, .featured-content-secondary .entry-title a:hover, .site-footer a:hover, .site-content .entry-meta a:hover {
        color: #CCCCCC;
    }
  15. It all looks and works just right. Thank you. I so appreciate all the time and help you have given me.

    Mike

  16. You are very welcome.

  17. warksmuseumnetwork
    Member

    hello again sacredpath,
    could you help again, please. Am trying to iron out some of the changes that have appeared form changing from one theme to another.
    1.Using some of your code above (used without any real understanding from me, but hey it works) I have made sure that the links in existing posts do not white out. However the theme has a number of boxes 'continue reading' 'follow' which are great colours, but when you hover over them the text disappears - as if it has gone 'behind' the box... can you help please?
    2. it's only an aesthetic consideration, but i prefer the title and the menu links not to have underlines, but Im not sure how to isolate them in the css.
    Many thanks, glynis

  18. warksmuseumnetwork
    Member

    ... and another ..
    my colleague has sent me screen grabs of what the new theme looks like on her computer.. the connecting picture link don't appear and the images in the widgets appear elongated .. is this a problem with this theme? help, arrrgh
    could you advise on how to change
    here are the screen grabs
    file:///C:/Users/gpow2/Downloads/image004.jpg
    file:///C:/Users/gpow2/Downloads/image005.jpg

  19. @warksmuseumnetwork, would you mind please starting a new help request instead of adding on more posts to older ones? It will be easier to help that way!

    http://en.forums.wordpress.com/forum/css-customization/#postform

    Also, the images you included in your latest post above are local links that will only work on your computer. You need to upload those to the internet somewhere in order for us to see them. Try uploading the images to the media library in your blog and we should be able to see them there.

Topic Closed

This topic has been closed to new replies.

About this Topic