A few CSS tweaks on Motif

  • Unknown's avatar
    davidfernandezprim · Member ·

    Hello there,

    I am trying to make a couple of CSS fine teaks on my photo and travel blog (based on the Motif template) and I was wondering if you guys could give me a hand figuring them out.

    1) On the footer section (visible in all pages), I added a Follow widget, and forced the follow button to full width in order to be more visible. The problem is, while this change is visible in the rest of pages, in the Blog section this tweak appears not to be working, the follow button shows the original width here. Worth to say, though, in this section I also have a second follow widget on the sidebar for the same purpose. Any chance to make the follow buttons in both widgets full-width at the same time?

    2) Also, I’ve noticed that the padding between widgets in the blog sidebar is not uniform. While the separation between the first and second widget is as I would like, the rest of widgets are more separated. How could I make them look uniformly separated?

    3) Finally, how can I make changes to the text colour or font size in a particular widget only, or how can I change the colour of the graphics box in the Milestone widget to make it stand out more?

    I hope my questions are not too confusing, otherwise let me know and I’ll clarify.

    Thanks a lot, CSS wizards!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1) On the footer section (visible in all pages), I added a Follow widget, and forced the follow button to full width in order to be more visible. The problem is, while this change is visible in the rest of pages, in the Blog section this tweak appears not to be working, the follow button shows the original width here.

    Let’s change the CSS selector to the following. This seems to work for me just fine in Firefox and Safari.
    .widget_blog_subscription input[type="submit"]

    2) Also, I’ve noticed that the padding between widgets in the blog sidebar is not uniform. While the separation between the first and second widget is as I would like, the rest of widgets are more separated. How could I make them look uniformly separated?

    The Milestone Widget has its own bottom margin setting which is different than the rest of the Widgets. To make the rest match the spacing on the bottom of the Milestone Widget, add this CSS. 

    .milestone-widget {
    margin-bottom: 1em;
}

    3) Finally, how can I make changes to the text colour or font size in a particular widget only, or how can I change the colour of the graphics box in the Milestone widget to make it stand out more?

    You can edit the colors for the date and countdown areas with the following (excuse my obnoxious demo colors). 

    .milestone-header {
    background: #cc0000;
}
.milestone-countdown {
    background: #66ff33;
}
  • Unknown's avatar
    davidfernandezprim · Member ·

    Hi thesacredpath,

    Wow! that’s genius!!! Exactly what I needed! I am always surprised of how you guys solve every question thrown in here!

    I might have a couple more CSS questions on the Follow widget, I hope you don’t mind my asking :-)

    1) I noticed that the email field that appears in the Follow widget for non-wordpress users is a bit too short. How could we tweak the height and width of this field?.

    2) Also, how can I change the colour of the word FOLLOW in the Follow Widget button?

    Thanks again for sharing your experience with us!

  • Unknown's avatar
    thesacredpath · Member ·

    Sure, we can do that, but first off, let me tell you that your site title is one of the best I’ve seen: Two Cameras and a Bucket List (that one would fit me too. :) )

  • Unknown's avatar
    thesacredpath · Member ·

    1) add the following to increase the height on the email field in the follow widget. 

    #subscribe-field {
    height: 30px;
}

    2) Add a color declaration to this existing rule in your custom CSS to change the color of the text in the Follow button.
    .widget_blog_subscription input[type="submit"]
    so it looks something like this: 

    .widget_blog_subscription input[type="submit"] {
    font-size: 16px;
    text-transform: uppercase;
    width: 95%;
    color: #3366ff;
}
  • Unknown's avatar
    davidfernandezprim · Member ·

    Hahaha very much appreciated thesacredpath, you can believe me if I tell you we had to decide among many names before coming up with the right one ;-).

    Great!, so the CSS color change on the FOLLOW button text works!
    However, with the modification on the height of the sign-up email field I experience an issue very similar to the previous update on the FOLLOW button size. The changes on

    .widget_blog_subscription #subscribe-field

    do not work 100% in the Blog page. While I can manage to change the height of the email field within the Follow Widget on the right-hand side, I cannot make it work on the email field in the footer sidebar. It might be a matter of choosing the right selector, any thoughts?

    Thanks a lot for your patience :-)

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, tricky these designers. Apparently there are two different CSS selectors for the subscribe input field. Replace what you have with the following. It seems to work everywhere for me. 

    .widget_blog_subscription #subscribe-field, .widget_blog_subscription #subscribe-field-2 {
    height: 35px !important;
}
  • Unknown's avatar
    davidfernandezprim · Member ·

    Perfect, as always :-).

    That worked like a charm! Thank you so much

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘A few CSS tweaks on Motif’ is closed to new replies.