Moving a horizontal line below social icons « Support Forum | Kriesi.at

Moving a horizontal line below social icons

9 posts from 3 voices

Tags:

Martin
Member

Hello,

In this theme the social icons in a post are beneath the author information. I have moved the above this information so they are "directly" beneath the post. However I am having a small problem with the space between the bottom of the post and the icons and a horizontal line.

I have now this structure:

Post

Social icons
horizontal line
horizontal line
author information

What i want to achieve is:

Post
horizontal line
social icons
horizontal line
author information

So one of the horizontal lines needs to be moved above the icons and the space between the end of the post, line and icons need to be reduced somewhat.

Any clues on how to get this done?

I have tried to move the social icons div in between the closing div for the -end entry_content- and the closing div for the -end entry-. This does solve the space issue however also places a smal horizontal line beneath the icons.

Posted 2 years ago #
James Morrison
Former Team Member

Hey,

Can you post a direct link to a page having this issue and I'll look into it :)

James

Posted 2 years ago #
Martin
Member

Sure here you go
http://www.albruna.nl/test/

Posted 2 years ago #
Martin
Member

Oops that wasn't a direct link was it:-o.

Here is the direct link
http://www.albruna.nl/test/?p=8

Posted 2 years ago #

Dude
Dude

You need to change following code in style1.css:

#top #social_icons ul{
border-top:none;
border-bottom:1px solid #e1e1e1;
}

#top #social_icons ul{
border-top:1px solid #e1e1e1;
}

and in style.css change

#top #social_icons ul {
clear:both;
float:left;
padding:0 0 10px;
width:100%;
margin:0 0 40px;
}

to something like:

#top #social_icons ul {
clear:both;
float:left;
padding:10px 0;
width:100%;
}

Posted 2 years ago #

Martin
Member

Thanks! The horizontal line is now above the icons. Is there a way to get the horizontal line beneath the icons a bit closer to those icons and have everything a bit closer to the post. So there is less of a gap between post and line and icons and line?

Regards,

Martin

Posted 2 years ago #
Dude
Dude
You need to play with the padding value, you can also add a margin value. I.e use following code:
```
#top #social_icons ul {
clear:both;
float:left;
padding:10px 0 0 0;
width:100%;
margin: -20px 0 0 0;
}
```
The syntax goes: margin/padding: top right bottom left.
Posted 2 years ago #
Martin
Member

Thanks that solved it!

I highly appreciate the help.

Regards,

Martin

Posted 2 years ago #
Dude
Dude

Glad that I could help you.

Posted 2 years ago #