Several question regarding CSS

This topic has 8 replies, 2 voices, and was last updated 8 years, 7 months ago by Mahesh.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts

April 22, 2016 at 3:00 pm #90151

Bastian

Participant

Hi,

My previous question about to center the text from a widget is resolved.

I have another question, several question regarding about CSS styling.

1) The logo-slider near the footer (widget) stop working with on other pages(only on homepage does it work). It doesn’t turn, when I added portfolio-sliders (Fashion and Print Portfolio).
They are logo’s from companies that my costumer worked with. I try to resolve this, but it doesn’t work. I use an 3rd party slider for the logo-slider from companies that my costumer works with. I don’t know if this is an CSS issue or PHP issue or jQuery/JavaScript issue.

2) I want to add just the background color of the right-sidebar to black and the text to white. But the social profiles turned into black. I’ve try this last night, several times, and it doesn’t work. Look below what I’ve tried:

.widget {
    clear: both;
	background-color: #000
}
.sidebar-top .widget_catchflames_social_widget {
	margin-bottom: 10px;
}
#secondary .widget_catchflames_social_widget {
    padding-bottom: 10px;
}
.sidebar-top .widget {
	background-color: transparent;
	border: none;
	border-radius: 0;
	float: right;
	margin: 10px 0 0;
	padding: 0;
}
.sidebar-top .widget:first-child {
	margin-top: 0;
}
.sidebar-top .widget.widget_catchflames_social_widget {
	margin-top: 0;
}
.sidebar-top .social-profile ul li {
	margin: 10px 0 0 10px;
}
.widget .widget-title,
.widget .widget-title a {
    color: #fff;
	font-size: 18px;
    font-weight: bold;
	padding-bottom: 10px;
}
.sidebar-top .widget-title {
    border: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
.widget .widget-title a:hover {
	color: #1982d1;
	text-decoration: none;
}
.widget .paddingtop {
    display: block;
    padding-top: 0.5em;
}
.widget-area,
.widget ul {
    font-size: 13px;
    line-height: 1.5;
}
.widget ul {
    margin: 0 0 0 1em;
}
.widget ul ul {
	margin-left: 1.5em;
}
.widget ul li {
	color: #777;
}
.widget a {
	font-weight: 400;
	text-decoration: none;
}
.widget a:hover,
.widget a:focus,
.widget a:active {
	text-decoration: underline;
}
/* Social Profile */
#site-generator .social-profile {
    clear: both;
    float: right;
}
.social-profile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.social-profile ul li {
	margin: 0 0 10px 10px;
	float: left;
}
.widget .social-profile {
    margin-left: 75px;
}
.widget_catchflames_social_search_widget .social-profile {
	float: right;
}
.social-profile ul li a {
	display: block;
	background: url("images/social-profiles.png") no-repeat right top;
	width: 34px;
	height: 34px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	text-indent: -99999px;
}
.social-profile ul li a:active {
	-moz-box-shadow: inset 0 0 6px #000;
	-webkit-box-shadow: inset 0 0 6px #000;
	box-shadow: inset 0 0 6px #000;
}
.social-profile ul li.facebook a {
	background-position: 0 0;
}
.social-profile ul li.facebook a:hover {
	background-position: 0 -44px;
}
.social-profile ul li.twitter a {
	background-position: -44px 0;
}
.social-profile ul li.twitter a:hover {
	background-position: -44px -44px;
}
.social-profile ul li.rss a {
	background-position: -88px 0;
}
.social-profile ul li.rss a:hover {
	background-position: -88px -44px;
}
.social-profile ul li.you-tube a {
	background-position: -132px 0;
}
.social-profile ul li.you-tube a:hover {
	background-position: -132px -44px;
}
.social-profile ul li.linkedin a {
	background-position: -176px 0;
}
.social-profile ul li.linkedin a:hover {
	background-position: -176px -44px;
}
.social-profile ul li.tumblr a {
	background-position: -220px 0;
}
.social-profile ul li.tumblr a:hover {
	background-position: -220px -44px;
}
.social-profile ul li.viemo a {
	background-position: -264px 0;
}
.social-profile ul li.viemo a:hover {
	background-position: -264px -44px;
}
.social-profile ul li.slideshare a {
	background-position: -264px 0;
}
.social-profile ul li.slideshare a:hover {
	background-position: -264px -44px;
}
.social-profile ul li.dribbble a {
	background-position: -308px 0;
}
.social-profile ul li.dribbble a:hover {
	background-position: -308px -44px;
}
.social-profile ul li.my-space a {
	background-position: -352px 0;
}
.social-profile ul li.my-space a:hover {
	background-position: -352px -44px;
}
.social-profile ul li.aim a {
	background-position: -396px 0;
}
.social-profile ul li.aim a:hover {
	background-position: -396px -44px;
}
.social-profile ul li.myspace a {
	background-position: -352px 0;
}
.social-profile ul li.myspace a:hover {
	background-position: -352px -44px;
}
.social-profile ul li.flickr a {
	background-position: -440px 0;
}
.social-profile ul li.flickr a:hover {
	background-position: -440px -44px;
}
.social-profile ul li.pinterest a {
	background-position: -484px 0;
}
.social-profile ul li.pinterest a:hover {
	background-position: -484px -44px;
}
.social-profile ul li.google-plus a {
	background-position: -528px 0;
}
.social-profile ul li.google-plus a:hover {
	background-position: -528px -44px;
}
.social-profile ul li.wordpress a {
	background-position: -572px 0;
}
.social-profile ul li.wordpress a:hover {
	background-position: -572px -44px;
}
.social-profile ul li.deviantart a {
	background-position: -616px 0;
}
.social-profile ul li.deviantart a:hover {
	background-position: -616px -44px;
}
.social-profile ul li.slideshare a {
	background-position: -660px 0;
}
.social-profile ul li.slideshare a:hover {
	background-position: -660px -44px;
}
.social-profile ul li.instagram a {
	background-position: -704px 0;
}
.social-profile ul li.instagram a:hover {
	background-position: -704px -44px;
}
.social-profile ul li.skype a {
	background-position: -748px 0;
}
.social-profile ul li.skype a:hover {
	background-position: -748px -44px;
}
.social-profile ul li.soundcloud a {
	background-position: -792px 0;
}
.social-profile ul li.soundcloud a:hover {
	background-position: -792px -44px;
}
.social-profile ul li.email a {
	background-position: -837px 0;
}
.social-profile ul li.email a:hover {
	background-position: -837px -44px;
}
.social-profile ul li.contactus a {
	background-position: -837px 0;
}
.social-profile ul li.contactus a:hover {
	background-position: -837px -44px;
}
.social-profile ul li.xing a {
	background-position: -882px 0;
}
.social-profile ul li.xing a:hover {
	background-position: -882px -44px;
}
.social-profile ul li.specificfeeds a {
	background-position: -927px 0;
}
.social-profile ul li.specificfeeds a:hover {
	background-position: -927px -44px;
}
img#wpstats {
	display: none;
}

Maybe I see over things or I forget to costumize it above in the CSS code.

Can you help me out? With my two questions above?

Thanks in advance!

Yours sincerely,
Bastian.

April 22, 2016 at 4:15 pm #90161

Mahesh

Participant

@bastian: Please post in your site url.

Regards,
Mahesh

April 22, 2016 at 5:54 pm #90166

Bastian

Participant

Hi @Mahesh,

It’s a Dutch website. This is the link: http://www.zwartopwitdesign.nl

Thanks!

Yours sincerely,
Bastian

April 22, 2016 at 7:59 pm #90170

Bastian

Participant

UPDATE.

Hi @Mahesh,

Their is an update.

1) I want to center the social profiles (icons) under the text “Volg jij mij al”? I tried, but it works not exactly. I tried this:

}
.widget .social-profile {
    margin-left: 75px;
}

–
2) The social icons profiles are in grey/gray. Is it possible to make the color from the social icon profiles from grey/gray to the color black?

Thanks in advance!

Yours sincerely,
Bastian

April 24, 2016 at 9:57 am #90263

Mahesh

Participant

@bastian: Sorry for the late reply, I checked your site.
1. The slider in footer “Opdrachtgevers” seems to be working fine in all of your pages.

2. Add just the background color of the right-sidebar to black and the text to white:
Go to Dashboard=> Apperance=> Customize=> Theme Options=> Custom CSS and add the following CSS:
/* Sidebar background-color to black and text to white */

#secondary .widget {
    background-color: transparent;
}
#secondary {
    background-color: #000;
}
.widget .widget-title, .widget .widget-title a {
    color: #fff;
}

3. Center the social profiles (icons) under the text “Volg jij mij al”

/* Center align social icons */
.widget.widget_widget_catchflames_social_widget {
    text-align: center;
}
.social-profile {
    display: inline-block;
}

4. Make the color from the social icon profiles from grey/gray to the color black:
This is not possible as the theme uses image for social icons.

Regards,
Mahesh

April 25, 2016 at 5:00 pm #90370

Bastian

Participant

Hi @Mahesh,

No problem for the late reply.

Thank you for your answers. I will try this upcoming week.

Final question, where can I find this code:

#branding { 
clip: rect(1px 1px 1px 1px); 
/* IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute; 
}

‘Cause the black menu/navigation on mobile devices are not showing.

And another minor issue, when I’m using Safari I see sometime very fast an grey-navigation. It’s only on Safari-browser, on FireFox-browser I don’t see it.

Thanks in advance!

Yours sincereley,
Bastian

April 26, 2016 at 9:39 am #90418

Mahesh

Participant

@bastian: Go to Dashboard=> Apperance=> Customize=> Theme Options=> Custom CSS box, you’ll find the above code there. Remove the code and the header will be visible in mobile devices.

Regards,
Mahesh

April 26, 2016 at 3:30 pm #90459

Bastian

Participant

Hi @Mahesh,

Thank you for your reply.

My another question:
I’ve created an own social icon brandings of Facebook, LinkedIn and Pinterest. Because it suits with the color of the website (black and white design). I’ve tried this morning with different codes (also in Dashboard -> Appearance -> Costumize -> Theme Options -> Costum CSS box) but I can’t center the brandings under the text “Volg jij mij al?”

Maybe is something small to add-on.

I’ve used an primary sidebar (right) in this theme.

Yours sincerley,
Bastian.

April 26, 2016 at 4:13 pm #90462

Mahesh

Participant

@bastain: In you Custom CSS box, replace the code:

.sidebar_social_links li {
    float: left;
    margin-right: 15px;
}

with following:

.sidebar_social_links li {
    display: inline-block;
    margin-right: 15px;
}

Regards,
Mahesh

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Several question regarding CSS’ is closed to new replies.