• Hey guys,

    hope you can help me out a bit. I am trying to get this myself using firebug but I cant some of that stuff for some reason …

    My site is at https://www.worldtravelgeek.com

    1. I added fa icons to the menus. However, one is not showing, probably because to the left is a drop down menu with an arrow so the icon to the right is not showing. I cannot seem to find a way to increase the space between the menu items so that the icon can show. Or do you think something else is wrong here?

    2. I would like the little line below each post in the main post area and the sidebars to disappear. I tried this for instance for the main post area (plus a few others) but didnt help:

    .post-row {
    	border-bottom-style: none;
    }

    3.What if I wanted to have all menu items and fonts in the footer show in black if I decide to change the background color to white for instance?

    4. The sidebar color I found, however it doesnt extend vertically all the way to the bottom. there is a space between sidebar and footer that seems to be covered by a background image. I disabled that image but how can i change the background color of that area? Hope you know what I mean.

    5. I added a feedly icon (not available as a font awesome) to the right of the social bar by adding this to functions.php after the social links function:

    echo '<li><a rel="nofollow" class="social-tooltip" title="Feedly" href="https://cloud.feedly.com/#subscription%2Ffeed%2Fhttps%3A%2F%2Fwww.worldtravelgeek.com%2Ffeed" target="_blank">
    		<img class="feedly-img" src="https://www.worldtravelgeek.com/wp-content/uploads/feedly-follow-logo-green_2_23px.png"/></a></li>';

    Seems to work but the icon is a bit too small compared to the others. If I make it even one pixel larger (the original is 50px) however, it will break the line and the whole top sidebar extends further down. Weird shit because the other icons are bigger and there seems to be enough space to all sides for a larger icon. Any ideas on how to do this better maybe?

    OK, it is late …
    Hope you have a nice day and thanks for your help in advance !
    Alex

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi worldtravelgeek. This should help get you started.
    1. Change it to something like “fa-facebook” or “fa-twitter” and it shows up fine. The “fa-user-secret” icon was added in font-awesome v4.3. The theme is using v4.1.
    2. Remove the divider lines:

    /* remove post and widget dividers */
    .post-row .post-list, .s1 .widget li {
      border-bottom: none;
    }

    3. You can change your existing links with:

    /* footer links black */
    #footer-bottom a {
      color: #000;
    }

    menu items:

    /* footer menu items black */
    #nav-footer .nav > li > a {
      color: #000;
    }

    4. The area below the sidebar is set by the main area background:

    /* area below primary sidebar background red */
    .main {
      background: #f00;
    }

    That also covers the content area so you’ll need to reset that as well:

    /* content background yellow */
    .content {
      background: #ff0;
    }

    5. The icon image is 23×23. Have you tried a larger image?

    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    Hey bdbrown,

    wow, thanks a lot for your fast help !! Really appreciate it!

    ad1:
    Thanks, icon shows up now. Can you tell me how to integrate fa 4.3 instead of 4.1?

    ad2:
    I had to add !important to the code to get it to remove it in the post area as well but it works now, thanks.

    ad3:
    I actually wanted all top menu items to appear black, not bottom. My mistake but I got it to work using this:

    /* Topbar menu links black */
    #nav-topbar .nav li a {
    	color: #000 !important;
    }

    ad4: Thanks
    ad5: I will test this soon but right now I have additional problems first.

    I played around some more with the colors and now have the following problems. I already found a few solutions myself (I am getting better at firebug) but these things still dont seem to work:

    6.

    The text color for all categories/tags/author infos etc in the main post area and widgets and individual posts is a very light grey. I would like to change that to black. I found that this seems to works in firebug at least for categories:

    .post-category {
    	color: #000000;
    }

    Unfortunately if I add this to my custom css it wont work anymore, even with !important at the end. Any ideas?

    7.

    I would like to change the textcolor when you hover over a link in menus, the title of a post, the author name, the categories or tags etc to a different color for instance blue …

    is there a way to do that easily in a custom css? I found a few hover items with firebug but changing those did not seem to have any effect.

    Thanks a lot for helping me out here !
    Have a nice friday!
    Alex

    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    As for the feedly icon, I found this, better solution:

    a: Install SVG Support Plugin
    b: Find and upload feedly.svg to the media library.
    c: add this to functions.php:

    // Add the feedly social link below Social links function on row 314
            	echo '<li><a rel="nofollow" class="social-tooltip" title="Feedly" href="https://cloud.feedly.com/#subscription%2Ffeed%2Fhttps%3A%2F%2Fadddomainnamehere%2Ffeed" target="_blank">
    		<img class="feedly-img" src="addfullpathtodomain/wp-content/uploads/feedly.svg"/></a></li>';

    d. add this to custom css:

    /* styling feedly.svg image in social links area */
    .feedly-img {
    	height: 25px;
    	width: 25px;
    	margin-bottom: -4px;
    }
    
    /* adapt page-title to compensate for margin-bottom of soc.links */
    .page-title {
    	padding-bottom: 15px;
    }

    For some reason the icon still looks smaller than the rest of the icons in the footer but in the top sidebar it looks ok now.

    For the footer icon try this:

    #footer .feedly-img {
      height: 26px;
      width: 30px;
    }
    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    wow, thanks for that. Works perfectly ??
    any ideas to the problems I mentioned above (6 and 7)
    (if you have some time that is)

    Thanks!

    This probably isn’t everything but should give you a start:
    6.

    .page-title h2 span,
    .page-title .category a,
    .post .post-meta a,
    .post .post-date,
    .post .post-byline,
    .post .post-byline a,
    .post-tags,
    .post-tags a,
    .related-posts .post .post-meta,
    .sidebar .widget a,
    .wp-pagenavi .pages
    { color: #000; }

    7.

    #nav-topbar .nav li a:hover,
    .page-title .category a:hover,
    .post .post-hover a:hover,
    .post .post-meta a:hover,
    .post .post-byline a:hover,
    .sidebar .widget a:hover,
    .related-posts .post a:hover
    { color: #00f; }

    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    oh my !

    lol

    I thought that was ONE setting somewhere haha

    Thanks for your help, will try ??

    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    sorry, one more follow up question.

    Now, link color changes from black to blue to light grey and back to black again on hover over the post titles depending where the mouse is. So there seems to be a second hover color that is still in place somewhere.

    btw. why doesnt it work if I just set

    a:hover { color: #00f; }

    ? At least that is what I saw in style.css

    For the post elements, try taking this out of the css:

    .post .post-hover a:hover,
    .post .post-meta a:hover,

    And add this:

    .post-hover:hover .post-title a,
    .post-hover:hover .post-cateogry a,
    .post-hover:hover .post-date
    { color: #00f; }

    Normally this would work as a global style; and, in fact does, for the most part, on the theme demo:

    body a:hover { color: #00f !important; }

    But since your code is minimized I can’t see what other modifications have been made so it’s much more difficult to test changes. That’w why I say hopefully what I’ve given you will help point you in the right direction.

    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    Hey bd,

    thanks for hanging in there with me. ??

    Mhh … I think I am not very comfortable with this as it seems overly messy. For instance, all the text links in texts (and in the footer etc) are also still grey and not blue like before. I would rather just set one hover and link color for the whole site like you mentioned.

    I think I figured out the root of the problem though. Seems like the color I set as primary color in the dynamic styling options is the sitewide hover and link color. Since I had that set that to a light grey, the hover and link color changed to grey systemwide.

    Is there an easy way to “unlink” this so I can have the top sidebar in a different color from the hover/link color? That would be all I need and seems to be a way cleaner approach. Maybe that would actually be a good improvement for the styling options in the GUI. Let users choose their own link/hover color right there instead of linking it to the color of the sidebar top background. What do you say?

    Thanks and hey … happy easter! ??
    Alex

    PS: If you want I can turn off all minifying options for you to take a better look but apart from some custom css (which I try to keep to a minimum), the feedly icon in functions.php and metaslider in header.php I didnt actually change anything, still using the parent hueman theme although I wondering if going with a child theme wouldnt be the better approach by now.

    Is there an easy way to “unlink” this

    You can disable the Dynamic Styles. This is from the theme documentation:

    Advanced: The dynamic styles will be added directly to the head of your theme. This is according to WordPress best practices, but if you do not want it printed out there, simply inspect the code of your page with the styling options set. Copy the CSS from head into your child theme’s style.css file or this theme’s custom.css (which you need to enable), and disable dynamic styling.

    Happy Easter to you as well.

    Thread Starter worldtravelgeek

    (@worldtravelgeek)

    Oh my, I need to turn off the minifying to see that I guess.
    I might switch to a child theme as well, it is getting messy by now …

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘A few styling questions …’ is closed to new replies.