WordPress.org

Ready to get started?Download WordPress

Forums

centering an icon in the sidebar (7 posts)

  1. tangerine3
    Member
    Posted 3 years ago #

    What code and where would i put it to make my weather icon centered in the sidebar. Here is the code for the weather icon.

    [Code moderated as per the Forum Rules. Please use the pastebin]

    SITE IS HERE: http://www.chromehorserentals.com/wordpresstestsite/
    Icon down in the right-hand sidebar, i would like to be centered

  2. vtxyzzy
    Member
    Posted 3 years ago #

    Change the 'margin: 0;' to 'margin: auto;' in
    <div style="padding: 0px; position: relative; width: 180px; height: 150px; overflow: hidden; margin: 0;">

  3. tangerine3
    Member
    Posted 3 years ago #

    Hi again,

    Sorry for pasting code here again but went to pastebin.com and couldn't even figure out how to paste the code. I have copied the following code into a text widget and the weather icon shows but I want it centered within the sidebar. I don't see the the code that was provided to me above for me to change.

    <div id="wx_module_3438">
       <a href="http://www.weather.com/weather/local/33549">Lutz Weather Forecast, FL (33549)</a>
    </div>
    
    <script type="text/javascript">
    
       /* Locations can be edited manually by updating 'wx_locID' below.  Please also update */
       /* the location name and link in the above div (wx_module) to reflect any changes made. */
       var wx_locID = '33549';
    
       /* If you are editing locations manually and are adding multiple modules to one page, each */
       /* module must have a unique div id.  Please append a unique # to the div above, as well */
       /* as the one referenced just below.  If you use the builder to create individual modules  */
       /* you will not need to edit these parameters. */
       var wx_targetDiv = 'wx_module_3438';
    
       /* Please do not change the configuration value [wx_config] manually - your module */
       /* will no longer function if you do.  If at any time you wish to modify this */
       /* configuration please use the graphical configuration tool found at */
       /* https://registration.weather.com/ursa/wow/step2 */
       var wx_config='SZ=180x150*WX=FHW*LNK=SSNL*UNT=F*BGI=clouds*MAP=null|null*DN=chromehorserentals.com*TIER=0*PID=1124046817*MD5=b1623eeae831ef563e20d8eed0504684';
    
       document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document.location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');
    </script>

    http://www.chromehorserentals.com/wordpresstestsite/

  4. degamer12
    Member
    Posted 3 years ago #

    All your items in the sidebar have a class art-block. Your weather widget has the class art-widget instead of art-block. Just adjust the style in your style.css to get it to center.

  5. tangerine3
    Member
    Posted 3 years ago #

    what should i look for in my style.css "class art-block" or "class art-widget" and is there a way to search for text in a style.css file within the appearance editor?

    Can I change the style.css file directly in my Appearance Editor?

  6. degamer12
    Member
    Posted 3 years ago #

    look for .art-block and add ,.art-widget after it. So that
    .art-block {
    will look like:
    .art-block, .art-widget {

  7. vtxyzzy
    Member
    Posted 3 years ago #

    Or, as an alternative, adjust the padding in the main div by adding this line to the end of style.css:

    #wx_module_3438 { padding-left: 20px; }

Topic Closed

This topic has been closed to new replies.

About this Topic