Which CSS rules are in play?

  • I’ve managed to get the code into my TwentyEleven child theme, and I’ve placed the widget in the header where I want it with CSS.

    However… I’ve been using Firebug, but I cannot seem to find the right CSS rules/attributes to display my 24-pixel icons properly. They appear giant — at the entire width of the header widget. I get the same results with both the Social Media Widget and with a Black Studio TinyMCE widget. A title and line of plain text seem to look fine, but the icons display huge.

    Site is here
    (If you see a nice tidy row of 24px icons under the search box, I fixed it, but right now there’s just a giant LinkedIn icon there.)

    I am a bit shaky with the CSS, but here’s what I have right now:

    /* STYLE SOCIAL MEDIA WIDGET AREA IN HEADER */
#header-social {
    margin: -60px 20px 0px;
    padding: 0px 0px 10px 0;
    font-size: 14px;
    border: none;
    line-height: 0px;
    float: ;
    width: 240px;
    height: 40px;
    z-index: 99;
    color: ;
    position: relative;
    top: -10px;
    left: 0px;
}

    And in header.php:

    <?php /* Add SOCIAL MEDIA WIDGET */ ?>
<div id="header-social">
	<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) : ?>
	<?php endif; ?>	</div><!-- #header-social -->

    Many thanks for help!!

    https://www.ads-software.com/extend/plugins/custom-widget-area/

Viewing 1 replies (of 1 total)
  • Thread Starter siriusly

    (@siriusly)

    Update: Well, I know I didn’t do this the right way, but at least the icons are the correct size right now. I still can’t figure out why they won’t display in a horizontal row, so I parked the div on the right side and narrowed it so it didn’t interfere with the search box.
    Here’s the (badly constructed) CSS:

    /* STYLE FOR CUSTOM WIDGET AREA - SOCIAL MEDIA - IN HEADER */
#header-social {
list-style: none;
margin: -135px 15px 0px 0px;
padding-left: 0px;
font-size: 14px;
border: none; border-spacing:0;
line-height: 0px;
color: #777777;
float: right;
width:5%;
height: 120px;
}

.smw_left {
    text-align: left;
    float: right;
}

    Would be most grateful for any advice to get to display in a horizontal row. Many thanks!!!

Viewing 1 replies (of 1 total)
  • The topic ‘Which CSS rules are in play?’ is closed to new replies.

Tags