Going crazy with wordpress

dadecotti

dadecotti

Supreme Member
Joined
Dec 13, 2008
Messages
1,227
Reaction score
112
How can I change the width for a text widget in wordpress?
It's a simple widget with a text on it and a link to another page, in the background of the small widget there is a colour back ground I just want to enlage the background of the widget a bit.
The text has 2 lines and if I don't enlarge the background it starts a new line for the second word, but I want everything in the same line.
Hope I did explained correctly
 
Advertise on BHW
I assume that it's a Sidebar widget. To increase the width of the widget, you'll have to increase the width of Sidebar and reduce the width of Primary area.
 
I have no clue how to do it.
The widget is at the bottom of the page.
It has a text with two words, since the background of the widget doesn't have enough space, it starts a new line for the second word.
But I would like it in the same line.

If I use the "inspect element" on chrome I can set the width from 90 to 100 and I get my desidered outcome, but of course I can't save it and I don't find any field to change it in the wordpress customization.
 
You can add CSS code in Wordpress Admin Appearance > Customize > Additional CSS
 
dadecotti said:
I don't have Additional CSS tab unfortunately...
Click to expand...
1. Open Chrome.
2. Hit F12.
3. Make the changes you want by clicking the area you want to change (example: main text area, widget area).
Look at the right of your screen for some mini codes.
The code you need is called width usually and you can set it via px; or percent.
4. If you don't have a custom css tab, by using F12 you can see what css you need to edit (usually style.css) , find that and apply the changes to your file.

Don't worry if you break anything using F12, it doesn't change anything to your server, it's a preview and you can restart everything by hitting F5 (Refresh).
 
Blakester said:
1. Open Chrome.
2. Hit F12.
3. Make the changes you want by clicking the area you want to change (example: main text area, widget area).
Look at the right of your screen for some mini codes.
The code you need is called width usually and you can set it via px; or percent.
4. If you don't have a custom css tab, by using F12 you can see what css you need to edit (usually style.css) , find that and apply the changes to your file.

Don't worry if you break anything using F12, it doesn't change anything to your server, it's a preview and you can restart everything by hitting F5 (Refresh).
Click to expand...


That's exacly what I did, I opened the console in chrome, found the right value, changed px, but as you said I can't save it on the server. It's just a preview.
I don't find a way to save it. I found the style.css file on my ftp but it doesn't have the full code, just the name of the theme I am using and some few more things.

Please help me
 
Start by taking a screen capture,.. So everyone can help you out
 
dadecotti said:
That's exacly what I did, I opened the console in chrome, found the right value, changed px, but as you said I can't save it on the server. It's just a preview.
I don't find a way to save it. I found the style.css file on my ftp but it doesn't have the full code, just the name of the theme I am using and some few more things.

Please help me
Click to expand...

iaFJd5B


Hi,

as you can see here with my expert photoshop skills you've got 2 numbers / circles.

No.1 is the code.
You need to find the specific code as it is and apply it to the No2 area (No1 is the .css of your theme).

So let's say you made the changes, you love the changes so you're going to apply the same changes of No1, to the .css file of number 2.
In my example, the .css file name is weird, but I suppose yours must be something along the lines of style.css or something.css

All you need to do is to search the file inside your folder of your theme, inside your server "file manager", possibly in public_html/yoursite.com/themes/blah blah

Use control + F on chrome to find the code after you've opened your .css file and paste the change you'd liked on the preview step.

Hope this helps
 
alright - I see someone got you the web-dev console up for chrome. Once you have that if you do by default Inspect (ctrl+shift+c) that should solve your issues of finding out where the sidebar CSS is, and also allow you to play and edit with the page. Feel free to PM me if you're still having issues - but what old boy with the sick photoshop skills I don't think mentioned, is there is a place in that tab (under inspect) which will tell you your CSS file that's needed to be edited.
 
Thread Moved​
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Networking Downloads

Marketplace

Content / Copywriting Hosting Images, Logos & Videos Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design Misc

Making Money

Affiliate Programs Hire a Freelancer Making Money Pay Per Click Site Flipping

BlackHatWorld

BHW Merch Forum Suggestions & Feedback Introductions Lounge Dispute Resolution

Other

Domain Name Forum IM Journeys Web Hosting Newsletter
Back
Top