SomewhatRounded

Hey grupgezgin,

When you’re setting the featured image, if you click “Edit Image” below the upload date and current dimensions of the image (on the right hand side) it will allow you to change the image size.

In the example you posted the ‘1150×120’ is actually just apart of the image name; if you did want to edit the height or width in the img tag, you would just have height and width attributes, so it would look something like:
<img id="bg_image" alt="" title="" src="http://grupgezgin.com/wp-content/uploads/2013/11/Grup-Gezgin-s4-1150x120.jpg" height="120">

Hopefully that helped!

No problem, it’s a lot of information!

The first one is a bit tricky, for spacing at the bottom of your fb box you’ll have to edit the inline styles for the iframe (the css styling will likely be right in the space where you edit your widgets) If you add in:
margin-bottom: 10px; it’ll give you the space there (and if you change the height to 438px it won’t cut off your text at the bottom either 🙂

The others are a matter of finding the classes and/or ids for the widgets; the “Other Women Liked” list has a class of wpp-list, the second list doesn’t actually have a directly assigned class or id so you could either add one in your widget area (it would like something like <ul class="thislist">) or we can just work around it rather easily as well! And last, but not least, the bloglovin’ widget has the id text-2 (IDs have a ‘#’ and classes have a ‘.’)

If all of that was confusing, the code below should help 🙂

.wpp-list {
    padding-bottom: 10px;
}
#categories-2 > ul {
    padding-bottom: 10px;
}
#text-2 {
    padding-top: 10px;
    text-align: center;
}

(The text alignment isn’t necessary but just makes i look nicer)

For the dashed line above your profile picture there’s a pseudo element “first-child” that’ll do the trick;

.widget-container-primary:first-child {
       border-top: none;
}

Tedah!

Awesome!

I actually still see the left and right padding on the .widget-container-primary If you remove that it should look better

And now that I look at it again, if you change the padding to 20px instead of the 10 it might look a little closer to what you previously had (but without the nudging) 🙂

The Firebug add-on for Firefox is a great tool for figuring out things like this! (There are tools for every browser though) It’ll help pick the design apart and test out changes before actually making them.

Something like:

.widget-container-primary {
    border-top: 1px dashed #000;
}

Would give you a line between each widget, but if you wanted something more customized or to have different borders around different widgets, you could play around and apply something similar to them.

Ex. The snippet below would give you a dashed line at the bottom of the “Other Women Liked:” list and the padding would give a little space between the list and the border

.wpp-list {
    border-bottom: 1px dashed #000;
    padding-bottom: 1em;
}

Hope that helps 🙂

I just took a look and it looks like you were able to get it working, cheers!

Side note: not sure if I just didn’t really notice before or what but you might want to use a child theme or custom css plugin to make your changes so you won’t lose them when the theme updates 🙂

The little bar along the top? It’s actually part of the .page-wrapper

.page-wrapper:before {
    background: none;
}

or background: invisible;

Let me know if that helps, or if I wasn’t looking at the right thing haha

Ahh! Forgot to mention, even though I’m sure you’re probably aware: there’s something kinda funny going on with some of your images and they just completely take over the screen.

I just used

.post img {
max-width: 200px;
max-height: 100%;
}

But it might be worthwhile for you to look at why it’s happening and figure it out as a learning experience, it’s the best way to learn 🙂