Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Editing Tagline in Motion Theme

  1. jackstr952
    Member

    I've searched and searched and experimented trying to edit the tagline in my blog but read that WordPress is themespecific. Question #1 - how to I reference the tagline in the Motion theme to make changes? Question #2 - is there somewhere out there I can get these unique codings to keep from asking hundreds of questions on the forum?
    Question #3 - how do I insert a blank line using the CSS editor?

    The blog I need help with is jstrandburg.wordpress.com.

  2. timethief
    Member

    Hi there,
    1. Taglines can be changed at any time here > Settings > General
    I think you may want to consult this too Custom header image in Motion

    2. I'm sorry but I don't know what you mean by unique coding.

    3. I don't help with CSS editing . I assume you have purchased the custom design upgrade and have flagged this thread so it gets moved to the CSS forum where you can get the help you need with CSS editing.

  3. timethief
    Member

    On the front page of the blog using the Motion theme you will see this:

    Hey there! Thanks for dropping by _____________ Take a look around and grab the RSS feed to stay updated. See you around!

    For the Motion theme, that text is shown when there's no widget defined for the "Header" area, on the Appearance > Widgets page on your dashboard. If you drag and drop a text widget there, the text will be replaced by that widget's contents.

  4. jackstr952
    Member

    The settings-->General only allow me to enter the text in the tagline.
    I did purchase the custom design upgrade and what i mean by the unique coding term which might be a little ambiguous is this: for instance, I can use #header h1 { font-size; 1.8em } to change the font-size of my title but when I try #tagline.... nothing happens. Moving and changing the attributes of what appears on the default Motion theme is too "hit and miss," inotherwords, I put in coding to try and "locate" the elements (paragraph, header, links, etc) to give it the attributes I desire. Hope this makes sense and thanks for your reply.

  5. timethief
    Member

    Here's a link to the CSS stylesheet for Motion to help you locate the selectors https://wpcom-themes.svn.automattic.com/motion/style.css

  6. jackstr952
    Member

    I just found out about the widget, but the tagline remains a mystery - I also copied and pasted the link to the selectors into a word document and searched for "tag" - didn't find it so I guess it's back to trial and error to try and find which selector references the tagline - not very intuitive to me, but thanks, at least it gives me somewhere to look.

  7. justpi
    Member

    Selectors vary from theme to theme, and don't coincide with the standard WP terms for things. The selector for the tagline in Motion is this:
    #header #logo #desc

    If you're using Firefox, you can install the Firebug add-on to examine the CSS of each element on your page and find the right selectors.

  8. jackstr952
    Member

    Thanks justpi that helped, although I changed the heading code to 
    #header {
    Text-align: center;
    Position: center;
    Top: 12px;
    Font-size: 1.8em
    Color: red;
    }
    That aligns both the title and the tagline to center but doens't change the tagline individually, nor does it make the color red.

    I'm not using Firefox so is there another source i can get these selectors from?

    Thanks.

  9. timethief
    Member

    Which browser and version of it are you using?

  10. timethief
    Member

    For IE9 you can install the Developer Toolbar http://www.microsoft.com/en-us/download/details.aspx?id=18359
    Note: The Developer Toolbar is not compatible with Internet Explorer 8. Please use the developer tools included with Internet Explorer 8. Press F12 or click the 'Developer Tools' entry in the Tools menu to begin using the tool.

  11. justpi
    Member

    I changed the heading code to 
    #header [ETC]
    That aligns both the title and the tagline to center but doens't change the tagline individually, nor does it make the color red.

    #header is the whole section that lies between the two top menus. The blog title and the tagline are separate sections inside that section, and the blog title is a link. To change the color of the blog title you need this selector:
    .wf-active #header #logo h1 a

    And I don't see why you're using basic "red" instead of a hex color code. Good color palettes here:
    http://www.december.com/html/spec/color.html

  12. designsimply
    Staff

    #2 - is there somewhere out there I can get these unique codings to keep from asking hundreds of questions on the forum?

    I would recommend looking at the theme's CSS directly. The easiest way to do that and see all of the CSS being applied is to use browser tools, which are built in to all modern versions of the major browsers. To see the browser tools, right-click on a page element and select the "Inspect Element" option. It should pull up a view highlighting the html for the thing you clicked on as well as all of the CSS rules that apply to it. In general, copying the selector used in the theme's CSS will be the best way to override it using custom CSS.

  13. designsimply
    Staff

    Question #3 - how do I insert a blank line using the CSS editor?

    I would use margin or padding for that. If you need help with a specific example, please start a new help request.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags