WordPress.org

Ready to get started?Download WordPress

Forums

Twentytwelve theme, text widget css customize (5 posts)

  1. sabregirl
    Member
    Posted 1 year ago #

    Hello. I am new to WordPress and I'm very sure that this question has been asked and answered, but I couldn't find an answer I am looking for...

    I would like to change css which is used in text widget. I found this article, http://codex.wordpress.org/WordPress_Widgets and saw an example of Styling the Text Widget, but I don't know where I can find these information in style.css file when I would like to define and modify it.

    Thank you for your help in advance.

  2. phillbooth
    Member
    Posted 1 year ago #

    Try using your web developer tools in your browser to identify the div id/class. Every widget is different normally having an ID so your not going to get generic CSS.

    You can edit the sidebar.php in the template to change the widget class if you like as well.

    It will be something like this in the HTML so widget name then id number (recent-comments-3)

    <aside id="recent-comments-3" class="widget widget_recent_comments">
    <h3 class="widget-title">Recent Comments</h3>
    <ul id="recentcomments">
    <li class="recentcomments"></li>
    <li class="recentcomments"></li
    <li class="recentcomments"></li>
    </ul>
    </aside>
  3. sabregirl
    Member
    Posted 1 year ago #

    Hello phillbooth,
    Thank you for your replay. I know my div IDs, but I'm not sure where I can find css to see what is defined in the classes as follows, for example.

    <div id="primary" class="sidebar">
    
    <ul>
    	<li id="text-1" class="widget widget_text"><h3 class="widgettitle">Widget Title for First Text Widget</h3>
    		<div class="textwidget">Text within the text widget area.</div>
    
    </div>

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    Thank you.

  4. phillbooth
    Member
    Posted 1 year ago #

    so it will be #text-1 to change just that widget or #widget to edit them all ie.

    #text-1 h3{
    color:red;
    }
  5. sabregirl
    Member
    Posted 1 year ago #

    Thank you for your help, phillbooth!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.