I Want to change the widgets size because it doesnt look good

**Cassano10** · Jun 14, 2012 14:51

I am facing a problem in my theme , it doesnt show the widgets correctly
and the content gets out of the box of the widget
i think because of the size
can someone tell how to fix this problem because i dont know anything about coding ?
this image clarify the problem
http://yfrog.com/nxfbadsj
Any help will be appreciated

**ralph.m** · Jun 14, 2012 15:31

Hi Cassano10. Welcome to the forums.

We will need to see your page to be able to help. Can you post a link?

**Cassano10** · Jul 11, 2012 15:36

Originally Posted by ralph.m

Hi Cassano10. Welcome to the forums.

We will need to see your page to be able to help. Can you post a link?

This is the page URL : http://arabjailbreak.com/
You can see the last widget in the left corner
I hope there is a fix for this problem

**Cassano10** · Jul 12, 2012 09:31

Can Someone help Please ?

**ralph.m** · Jul 12, 2012 16:09

It's hard to work with iframes like this. You could try changing the widths in your HTML:

Code:

<ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px">
    <ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px">
        <iframe allowtransparency="true" frameborder="0" height="250" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" scrolling="no" vspace="0" width="300" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins>

That 300 figure is too wide, so see if you can access it and make it something like 280.

Edit:

Victorinox has a much better suggestion below.

**Victorinox** · Jul 12, 2012 16:15

I can't see the Facebook widget on the page, possibly due to some blocking my end, but the Google one can be aligned within the boundaries of the .textwidget container with this CSS added to style.css:

Code:

.textwidget ins {
    display: block !important;
    margin: 0 auto !important;
}

**Cassano10** · Jul 12, 2012 18:06

Thanks Everyone here for helping me
I appreciate your help Victorinox
Now adsense widget appears correctly

I have just two other problems
1- I just added the facebook box widget and it is not fitting the border of the widget is there a solution for this one ?
2- Can I make google adsense appear without a widget behind of it ... I mean only the image of the advertisement without the widget ?

And Thanks in advance for everyone here

**ralph.m** · Jul 12, 2012 18:21

Originally Posted by Cassano10

I just added the facebook box widget and it is not fitting the border of the widget is there a solution for this one ?

You could modify Victorinox's code above to this:

Code:

.textwidget ins, .textwidget iframe {
    display: block !important;
    margin: 0 auto !important;
}

Can I make google adsense appear without a widget behind of it ... I mean only the image of the advertisement without the widget ?

Which bit is the widget?

**Cassano10** · Jul 15, 2012 23:23

I think this image clarifies what I mean http://yfrog.com/emadsenseborderp

I want to make the advertisement only appear .
Is that possible ?
if it is , I hope someone can guide me how to do that ?
Thanks everyone here .
I really liked this forum who has a lot of helpful people

**ralph.m** · Jul 16, 2012 03:57

This is a bit crude, but you could change

Code:

<div class="widget">

to something like

Code:

<div style="margin-bottom: 15px;">

for that element. Obviously it would be better to add a class instead of a style and put the actual style in your style sheet. The above is just for example purposes.

**Cassano10** · Jul 16, 2012 18:58

Originally Posted by ralph.m

This is a bit crude, but you could change

Code:

<div class="widget">

to something like

Code:

<div style="margin-bottom: 15px;">

for that element. Obviously it would be better to add a class instead of a style and put the actual style in your style sheet. The above is just for example purposes.

I am sorry
I am an expert in coding , I am just a blogger
Can you tell me what file or what place I need to change it to ( <div style="margin-bottom: 15px;"> ) ?

**ralph.m** · Jul 16, 2012 19:12

Do you have access to your HTML?

**Cassano10** · Jul 16, 2012 22:23

Yes, I have
And by the way I only want the adsense widget appear without a border not all widgets ?

**ralph.m** · Jul 17, 2012 00:58

Yep, so just edit the HTML of the particular widget concerned, as I showed above. The widget is contained inside a

<div class="widget">

Just remove the class="widget" for that div. You will also want some bottom margin, which you can add in as I showed.

**Cassano10** · Jul 17, 2012 01:38

Where do I find the HTML of the particular widget ?

**ralph.m** · Jul 17, 2012 02:14

It's hard to say exactly, because you are using wordPress, which stores bits and pieces of your templates in various places. There's probably a file in your theme files for the sidebar, which is where I'd be looking.

**Cassano10** · Jul 17, 2012 04:55

I found sidebar.php file
it has these codes

<div id="leftContent">
<div id="smallwidgets">
<div id="smallwidgetsRight">
<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar(صغيرـيمين) ) : ?>
<div class="no-widgets">
</div>
<?php endif; ?>
</div>
<div id="smallwidgetsleft">
<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar(صغيرـيسار) ) : ?>
<div class="no-widgets">
</div>
<?php endif; ?>
</div>
</div>
<?php include TEMPLATEPATH.'/templates/social.side.php';?>
<div id="widgets">
<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar(كبير) ) : ?>
<div class="no-widgets">
</div>
<?php endif; ?>
</div>
</div>

So what should I change to make the adsense widget appear without border ?

**ralph.m** · Jul 17, 2012 06:52

Ah poop, I dunno. WP sucks. I'll move this to the WP forum for you. Hopefully someone over there will know where to edit this code.

**Cassano10** · Jul 17, 2012 07:43

Originally Posted by ralph.m

Ah poop, I dunno. WP sucks. I'll move this to the WP forum for you. Hopefully someone over there will know where to edit this code.

OK Thanks a lot for helping me you and Victorinox
I hope someone in WP forum can help me

**Mittineague** · Jul 17, 2012 13:50

I couldn't get the page to load in, but maybe you could get away with using a different selector?

eg. instead of

.widget {

something like

div#smallwidgetsRight+div.widget {

**Cassano10** · Jul 17, 2012 17:40

Originally Posted by Mittineague

I couldn't get the page to load in, but maybe you could get away with using a different selector?

eg. instead of

.widget {

something like

div#smallwidgetsRight+div.widget {

I am sorry , I couldn't get it because I dont know anything about coding

Could you tell me what file I need to edit ?
I will understand If you tell me where to go and file to edit

**Mittineague** · Jul 17, 2012 18:16

With luck, it might be only the .css file that needs editing.

But I'd need to see a bit of the HTML mark-up to know.
The widget div and several container elements up should be enough for a try.

**Cassano10** · Jul 19, 2012 07:01

Hi Mittineague ,
Can you tell me step by step how to do that ? because I am newbie

I also found some solutions on the web but I didnt try them because I dont know how

this is first one from this forum http://forum.bytesforall.com/showthread.php?t=9940

You just have to determine the selector for that particular widget (I use the Firebug extension for Firefox) and use code similar to the following which removes the border from your green coupon and centers the image.

Code:

div#text-4 {border:none;text-align:center;}

the second one from this site http://www.pagelines.com/forum/discu...text-widget/p1
I want you to try adding this to your CSS Stylesheet or Custom Code area:

Code:

#text-3{border:0px}

Will these solutions work ?
If they will , Can you please explain to me this step and how can I do it ?

You just have to determine the selector for that particular widget (I use the Firebug extension for Firefox)

**ralph.m** · Jul 19, 2012 07:10

Originally Posted by Cassano10

Will these solutions work ?

No, they are CSS solutions, but if they had worked, we would have suggested them and not moved you to the CMS forum.

Those special classes don't exist in your template, so we can't do something like that. That's why you need to dig in to your template files and find the section where this sidebar is generated.

**Mittineague** · Jul 19, 2012 11:03

Originally Posted by Cassano10

Hi Mittineague ,
Can you tell me step by step how to do that ? because I am newbie
.....

Originally Posted by Mittineague

.....
But I'd need to see a bit of the HTML mark-up to know.

The widget div and several container elements up should be enough for a try.

What I mean is what you see in view-source of the page's generated output.

User Tag List

Thread: I Want to change the widgets size because it doesnt look good

Thread Tools

Display

I Want to change the widgets size because it doesnt look good

Bookmarks

Bookmarks

Posting Permissions