WordPress.org

Ready to get started?Download WordPress

Forums

How to make background work on text widet (6 posts)

  1. kuting
    Member
    Posted 10 months ago #

    I'm using an older theme and was able to make it work somehow with the current wordpress version. However, I'm having trouble fixing the text widget. If i add a text widget, it doesn't seem to show the background. You can see the screenshot here

    What can i do to make it work so the background image i use for widgets will show properly for it? thanks

  2. esmi
    Theme Diva & Forum Moderator
    Posted 10 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. kuting
    Member
    Posted 10 months ago #

    I see the following code. The side bar has category widget and text widget

    <div id="sidebar">
    
    <ul>
    <li id="categories-4" class="widget widget_categories">
    <h2 class="widgettitle">Categories</h2>
    <span class="top"></span>
    </ul>
    <ul>
    <li class="cat-item cat-item-1"><a href="http://mywebsitename.com/blog/archives/category/uncategorized" title="View all posts filed under Uncategorized">Uncategorized</a>
    </ul>
    <li id="text-8" class="widget widget_text">
    <h2 class="widgettitle">Text Widget</h2>
    <span class="top"></span>
    <div class="textwidget">This is a text text text </div>
    
    <strong>and this is the css style for the sidebar:</strong>
    #sidebar {
    	float:left;
    	margin-left:30px;
    	display:inline;
    	position:relative;
    	top:-75px;
    }
    
    #sidebar ul li h2 {
    	background:url(images/titleTag.png) no-repeat;
    	width:166px;
    	height:71px;
    	padding-top:25px;
    	display:block;
    	position:relative;
    	z-index:100;
    	margin-bottom:-60px;
    	font-size:23px;
    	color:#B23D80;
    	padding-left:20px;
    }
    
    #sidebar ul li .top {
    	display:block;
    	background:url(images/listTop.png);
    	width:240px;
    	height:90px;
    	position:relative;
    }
    
    #sidebar ul li {
    	background:url(images/listBtm.png) bottom left no-repeat;
    	width:240px;
    	display:block;
    	padding-bottom: 27px;
    }
    
    #sidebar ul li ul {
    	position:relative;
    	background:url(images/listRpt.png);
    	width:100%;
    }
    
    #sidebar ul li ul li {
    	background:url(images/star.gif) 30px 5px no-repeat;
    	line-height:30px;
    	border:0;
    	padding:0;
    	position:relative;
    	top:-30px;
    }
    
    #sidebar ul li a {
    	color:#a6431c;
    	text-decoration:none;
    	font-size:16px;
    }
    
    #sidebar ul li a:hover {
    	color:#908d2c;
    }


    [you must use the code buttons when posting code]

  4. kuting
    Member
    Posted 10 months ago #

    the same thing happens when i add like the calendar, the background image doesnt show. any suggestions on what i can do to fix it?

  5. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    It's really not possible to help with CSS without seeing the site live, so a link to your site would be the best way for someone to be able to help you.

  6. kuting
    Member
    Posted 10 months ago #

    Sorry, here's the link to the test site. See the calendar and text widget on the sidedar

    [Note: You're going to have to wait patiently for support here. That's a compromise when using a free support service. If your issue is urgent then consider using a paid service.]

Reply

You must log in to post.

About this Topic