Theme Sidebar layoyt

misswilliamspetites · Member · Nov 1, 2014 at 8:51 am
Copy link

Add topic to favorites
Hi I’m using the healthy living theme ( purchased) and I’ve having trouble with the layout of my sidebar. The spacing is too large much makes my site looks messy. I would very much appreciate it if someone can assist me with making the sidebar look more uniformed with less gaps / spacing between the widgets.

many thanks
pauline

The blog I need help with is: (visible only to logged in users)
jeremeylduvall · Member · Nov 1, 2014 at 3:42 pm
Copy link
Howdy Pauline,

It looks like your site is currently matching the spacing that is present in the theme demo here:

http://healthylivingdemo.wordpress.com/

In order to change the spacing from the default theme appearance, you would need to purchase the Custom Design upgrade and use custom CSS:

http://en.support.wordpress.com/custom-design/

Before you purchase the upgrade, you can also try it out free for two weeks under Store -> Store from your Dashboard. If you decide to go with the upgrade, let me know!
misswilliamspetites · Member · Nov 3, 2014 at 6:56 am
Copy link
Hi Jeremy

Thanks for that. But the theme I purchase seem to already have CSS. I’m not sure how to use it either.

many thanks
pauline
misswilliamspetites · Member · Nov 3, 2014 at 6:59 am
Copy link
Also, how do I add an eventbrite event to my html so that the image shows. I’ve tired pasting the coding in the text widgets but it shows as text when i save it.

Kind regards
pauline
jeremeylduvall · Member · Nov 3, 2014 at 2:01 pm
Copy link
Hi Pauline!

Thanks for that. But the theme I purchase seem to already have CSS. I’m not sure how to use it either.

Themes are styled using CSS so whenever you enable a theme, it’s going to have some default CSS setup already. In order to make the modification you’re referring to, you would need to create/insert your own CSS to override the theme default. Does that help to clarify?

In order to insert your own CSS, you will need to purchase the Custom Design upgrade shown here:

http://en.support.wordpress.com/custom-design/

Also, how do I add an eventbrite event to my html so that the image shows. I’ve tired pasting the coding in the text widgets but it shows as text when i save it.

Could you clarify what you’re looking to have within the widget? Is it just an image with a link to your event? If so, the easiest way to do that is actually to use the Image widget shown here:

http://en.support.wordpress.com/widgets/image-widget/

Alternatively, if you’re looking to display a calendar of your events, you can setup the Eventbrite-specific widget here:

http://en.support.wordpress.com/widgets/eventbrite-event-calendarlisting-widget/

I’m happy to help more once I know exactly what you’re looking for!
misswilliamspetites · Member · Nov 4, 2014 at 6:22 am
Copy link
Hi jeremy,
I don’t know what CSS is to be honest. Can you explain? And I don’t have my own.

As for the Eventbrite I wanted to put their widget calendar that you click on, it is an image.
jeremeylduvall · Member · Nov 4, 2014 at 6:55 pm
Copy link
Hey Pauline,

Please see below:

I don’t know what CSS is to be honest. Can you explain? And I don’t have my own.

CSS refers to “cascading stylesheets”. It’s the behind-the-scenes code that helps to style your site to look a certain way. When people build themes (like Healthy Living), they write a specific stylesheet that determines how the theme actually looks.

If you want to change a stylistic aspect of the site (like changing the gap between the widgets), you have to add a bit of “custom CSS.” Basically, you would be modifying a small snippet of the original CSS written by the theme author to adjust the default layout.

You can think of this like repainting a house. The builders originally painted it a certain way, but when you moved in, you decided you wanted to paint it a different color. So, you apply a coat of paint to a wall or two. You aren’t knocking down the whole house, just repainting one wall. That’s synonymous with a CSS change (changing one aspect of the theme, not the entire thing).

At WordPress.com, you’re required to have the Custom Design upgrade in order to make an adjustment to the CSS of a theme. So, in order to add your own CSS (which I can help you with) and adjust the layout of the widgets, you would need this upgrade:

http://en.support.wordpress.com/custom-design/

Does that help to explain?

As for the Eventbrite I wanted to put their widget calendar that you click on, it is an image.

Great! If you’re just referring to an image, you can add it using the instructions here:

http://en.support.wordpress.com/widgets/image-widget/
misswilliamspetites · Member · Nov 5, 2014 at 6:56 am
Copy link
Hi Jeremy,

I’m terrible at painting! So how do i use CSS on healthy living to decrease the space, when i don’t know how to use it. I’m not apt with HTML.

Thanks for all your help.
misswilliamspetites · Member · Nov 5, 2014 at 7:01 am
Copy link
As for the eventbrite; I was give a code to place in the text widget and then it should show as an images. It’s not an image to begin with.
However when I save it it shows as a line, some code and the link to the image.
jeremeylduvall · Member · Nov 5, 2014 at 2:41 pm
Copy link
So how do i use CSS on healthy living to decrease the space, when i don’t know how to use it. I’m not apt with HTML.

I’m happy to help you with the CSS! First, you’ll need to purchase the Custom Design upgrade shown here:

http://en.support.wordpress.com/custom-design/

That “unlocks” the ability to add your own CSS.

As for the eventbrite; I was give a code to place in the text widget and then it should show as an images. It’s not an image to begin with.
However when I save it it shows as a line, some code and the link to the image.

Can you copy and paste the code here that you’re trying to use?
misswilliamspetites · Member · Nov 6, 2014 at 6:04 am
Copy link
oh, ok. I will look into purchasing it.
here is the eventbrite coding:

<div style=”width:195px; text-align:center;” ><iframe src=”https://www.eventbrite.co.uk/calendar-widget?eid=14091659533″ frameborder=”0″ height=”556″ width=”195″ marginheight=”0″ marginwidth=”0″ scrolling=”no” allowtransparency=”true”></iframe><div style=”font-family:Helvetica, Arial; font-size:10px; padding:5px 0 5px; margin:2px; width:195px; text-align:center;” >Event Registration Online <span style=”color:#ddd;”>powered by Eventbrite</div></div>

thanks again for your help.
jeremeylduvall · Member · Nov 6, 2014 at 4:08 pm
Copy link
Ah – sorry for not noticing this sooner. The “iframe” code is blocked for security purposes as explained here:

Add Code to Your Site

You will not be able to use that code at WordPress.com. Can you try setting up the Eventbrite widget following the instructions here instead?

http://en.support.wordpress.com/widgets/eventbrite-event-calendarlisting-widget/
misswilliamspetites · Member · Nov 12, 2014 at 11:09 pm
Copy link
Ok thank you. I’ve purchase the design upgrade. Are you able to assist me with the gaps on the healthy living sidebar?
jeremeylduvall · Member · Nov 13, 2014 at 8:49 pm
Copy link
Definitely! Can you give this bit of CSS a try?
```
.sidebar-widget-area .widget {
padding: 36px 30px 3px;
}
```
That should decrease the space between the widgets a bit. You’ll want to paste that under Appearance -> Customize -> CSS, replacing all of the default text.
misswilliamspetites · Member · Nov 14, 2014 at 7:02 am
Copy link
Thank I’ve done that but the spacing still looks too large.
jeremeylduvall · Member · Nov 14, 2014 at 4:51 pm
Copy link
No problem! Since we’ve identified the CSS code to change the padding, we can just adjust it to get the look you’re going for. For example, give this a try:
```
.sidebar-widget-area .widget {
	padding: 3px 30px 3px;
}
```
The first and last value (3px for both) represent the top padding and the bottom padding of the widgets. The “30px” value represents the right to left padding. Can you try the code above and see if that fits what you’re looking for?

No items found.