Transparent and Border Questions « Support Forum | Kriesi.at

Support Forum » Angular

Transparent and Border Questions

14 posts from 4 voices

Started 11 months ago by laurenbowers
Latest reply from Mya
This topic is closed
This topic is resolved

Tags:

laurenbowers
Member

Hello

I found some threads with the same type of questions but none of the codes worked in my css so i thought id ask,

Is it possible to...

- Make the social Icons white background colour and the thin border that surrounds them transparent?
- Make the portfolio thumbnail backgrounds transparent?

And is there a code to get a single thin line? When i put [hr] it inserts the line with the colour at the beginning

Thanks very much

Lauren :)

Posted 11 months ago #

Dude
Dude

Add following code to css/custom.css:

.social_bookmarks .rss:hover, .social_bookmarks .facebook:hover, .social_bookmarks .twitter:hover, .social_bookmarks .mail:hover, .social_bookmarks .dribbble:hover, .social_bookmarks .linkedin:hover, .social_bookmarks .search:hover, .social_bookmarks .gplus:hover   {background-color:#fff;}

#top .social_bookmarks {
    border: none;
}

Posted 11 months ago #

laurenbowers
Member

Hello,

Thanks for replying but it didn't take, the social icons still stayed white.

Is there anything else i can try?

Thanks

Lauren

Posted 11 months ago #
Mya

Hi Lauren,

Try this:

.social_bookmarks .rss:hover, .social_bookmarks .facebook:hover, .social_bookmarks .twitter:hover, .social_bookmarks .mail:hover, .social_bookmarks .dribbble:hover, .social_bookmarks .linkedin:hover, .social_bookmarks .search:hover, .social_bookmarks .gplus:hover { background-color: transparent; }

Regards,
Mya

Posted 11 months ago #
laurenbowers
Member

Hi Mya,

Thanks for your help but it still didnt work :(

This is the site i saw the effect on - http://www.thefifthorder.net/

Kind Regards

Lauren

Posted 11 months ago #

Mya

Hi Lauren,

Use this:

#top .social_bookmarks li {
    background-color: transparent;
}

Regards,
Mya

Posted 11 months ago #

laurenbowers
Member

Thanks for your help Mya it worked!

I just have one more question... do you know a short code for a plain thin line? when i put the default line in [hr] i get a thin line with a block of colour at the beginning.

Thank You

Lauren

Posted 11 months ago #
Dude
Dude
Hey!

You can remove this block with following css code:
```
.hr .seperator-addon{
display: none;
}
```
Add it to css/custom.css.

Best regards,
Peter
Posted 11 months ago #
laurenbowers
Member

Hi thats brilliant thanks :)

Is there a code for a single line you can insert yourself? Ive got some text in the widget area and it would look alot better if it had a single plain thin line to break it up.

Thanks for all your help

Lauren

Posted 11 months ago #
Ismael
Moderator

Hello,

You can use the Insert Shortcodes > Dividers. I think hr will work too.

Regards,
Ismael

Posted 11 months ago #
laurenbowers
Member

Thanks Ismael,

Is there an actual shortcode i can type in becuase its for the widget text area that is just plain text. When i type in [hr] it just puts a defult line in.

Thanks for your help

Lauren

Posted 11 months ago #

Mya

Hi Lauren,

Here's the divider options you have:

Simple HR

<div class="hr hr_flag ">
<span class="primary-background seperator-addon"></span>
<span class="hr-seperator extralight-border"></span>
</div>

HR with top link

<div class="hr hr_flag ">
<div class="primary-background hr_color">
<span class="flag-text on-primary-color">
<a class="scrollTop" href="#top">top</a>
</span>
</div>
<span class="hr-seperator extralight-border"></span>
</div>

Regards,
Mya

Posted 11 months ago #

laurenbowers
Member

Thank you Mya!

It worked perfectly :)

Thanks for all your help, very much appreciated!

Lauren

Posted 11 months ago #
Mya

You're welcome Lauren! Let us know if you have more questions.

Regards,
Mya

Posted 11 months ago #