SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Getting styling right

4 years 5 months ago #107345 by hantaah
Getting styling right was created by hantaah
I am trying to copy this side bar: www.yoursunnysideup.com/
and here's what I have so far: www.muslimahwebdesign.co.uk/yup1

It doesn't have to be exact, mine is smaller anyhow but the first one seems much more neat and tidy and mine seems messy. I have fiddled around with it for ages. Any tips for getting it better?

Please Log in to join the conversation.

4 years 5 months ago - 4 years 5 months ago #107462 by Valentin
Replied by Valentin on topic Getting styling right
Hi hantaah,

I can see some CSS issues, specially about spacing.

Are you familiar with Firebug? Please consider using this great addon to troubleshoot the issues and improve to your needs playing with CSS: www.ostraining.com/blog/wordpress/firebug-wordpress-css/

Once you know which custom CSS to use, try this plugin to add it to your site.

Let us know if this information was helpful

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 5 months ago - 4 years 5 months ago #107495 by hantaah
Replied by hantaah on topic Getting styling right
Thanks, I have been using firebug but that's where I'm stuck.
I've done changes with firebug but can't seem to know how to better it. I am obviously getting the spacing wrong but how? I've tried centering it, tried changing the size of the submit field but it just still looks disorganised

with regards to that plugin, I usualy use the edit css from jetpack. What's the difference with this one?

Please Log in to join the conversation.

4 years 5 months ago - 4 years 5 months ago #107524 by Valentin
Replied by Valentin on topic Getting styling right
Let's go step by step.
In www.yoursunnysideup.com/ the right sidebar doesn't use any background, however in www.muslimahwebdesign.co.uk/yup1/ there is a gray background in every widget and spacing in left and right of every widget.

Using the plugin I recommended add this custom CSS code to make that gray background white:
.sidebar .side_box {
    background-color: #FFF;
    padding-left: 0;
    padding-right: 0;
}

Where #FFF is the hex code for white.
The padding properties remove the spacing in left and right.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 5 months ago #107581 by hantaah
Replied by hantaah on topic Getting styling right
I put a light gray background there to make it look a a bit neater. I've removed it now and put your code I also centered the submit button. It looks a bit better but still a but mesy don't you think?

Please Log in to join the conversation.

4 years 5 months ago #107596 by Valentin
Replied by Valentin on topic Getting styling right
Hi hantaah,

The site looks better in my opinion. Good job!

There are still some differences between both sites: different font-family and size and spacing.
Try the Firebug tutorial I suggested in previous replies and see if you can troubleshoot the remaining issues.

If you have any concern, feel free to ask. We will do our best to assist you :)

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 5 months ago #107598 by hantaah
Replied by hantaah on topic Getting styling right
Good thanks.

I'm using firebud and done troubleshooting but hitting a brick wall now. Looked at maddings and fiddles around a lot. Maybe I'm lloking at the wrong classes or something but I don't seem to be able to find the rest

Please Log in to join the conversation.

4 years 5 months ago #107618 by Valentin
Replied by Valentin on topic Getting styling right
Which specific element and what CSS properties you want to change (padding, margin, color, etc.)?
Share screenshots pointing the specific element if possible.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 5 months ago #107619 by hantaah
Replied by hantaah on topic Getting styling right
That's the thing. I'm not sure.
You said there are still some things off and I can see it needs a little more tweaking but I can't gigure what?

Please Log in to join the conversation.

4 years 5 months ago #107658 by Valentin
Replied by Valentin on topic Getting styling right
Design can be relative, depends on which result you want to achieve. By knowing that information I can do suggestions.

Something to consider, both sites have different html structure and that generates different results, as example the newlsetter signup is different in both sites.
Do you like the current look of this widget in www.muslimahwebdesign.co.uk/yup1/ ? If not, what would you change?

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!