Skin color

Hello Peter,

Yes, you can do custom css in your theme. For that you you have to create a child theme. Then enqueue custom.css in function.php file. Afterward, you can style anything in that css file. Please read this reference link for enqueue technique – http://codex.wordpress.org/Function_Reference/wp_enqueue_script

You have to apply Style Override Technique in custom.css like the following code:

p {
font-size: 24px !important;
}

Thank You 🙂

I am sorry, I should have asked the question more clearly.

I have a child theme with a style.css, but it gets overwritten by bootstrap.css and skincolor.css (example green.css) unless you use the !important keyword.

This brings a problem for example when I add the following to my style.css in the child theme:

a{
color: #AAA !important;
}

Because now all linkcolors get overwritten instead of just the ones that should be overwritten (and are stylized with green.css). Furthermore not all colors can be changed in this way because !important overwrites everything.

I now just changed the color used in green.css, but this would get overwritten when a update of dokan comes out. So everytime Dokan gets an update I have to change the colors in green.css again to get the colors I want.
So my suggestion is to add a custom.css to the skins folder and just add a setting in dokan settings for the color that should be used in this custom.css.

I wanted to try and do this myself, but I don’t know how.

Best regards,

Peter

Hello Peter,

Thank you for your idea. I will discuss about this with our developer. Hope they will implement this feature in near future.

Thank You 🙂

The question remains.

How can I do this myself for the time being, without changing the color directly in green.css. But instead using a different file, preferably in my child theme.

Best regards,

Peter

Hello Peter,

This is little bit complicated in this forum for teach you how to do additional setting page in child theme or main theme. You can search in goolge and get idea which will help you. Actually this is additional feature. We only support for our built in features. You can read our support policy to know more- http://wedevs.com/priority-support/.

Hope you will understand me.

Thank You 🙂

I don’t want a additional settings page in the backend, I want a additional skin. There are a couple colors supported out of the box and I want a additional color instead of changing the exisiting green.css because it will be overwritten when a update comes out.

Is it something that is planned for a future update?

If no, please guide me in the right direction. Google doesn’t know about the dokan theme, wedevs do. If you could tell me in which file the skin is loaded, that would already be very helpfull, I think.

Thanks.

Best regards,

Peter

Hello Peter,

May be it was some misunderstanding. If I don’t mistake you are talking about seller skin right?

Thank You 🙂

No, I am talking about the site skins. When I press appearance -> customize from backend and then go to theme settings I can select a skin color for the site:
– Orange
– Blue
– Green
– etc.
I want a custom color. To do this I now changed the color settings directly in green.css, but when a update comes I have to change this again. So this is not a good solution. I would rather have a skin called custom that uses custom.css where I can set my specific color rules.

So is this a planned feature? If no, can you point me in the right direction to do this myself?

I hope this is a bit more clear?

Thanks in advance.

Best regards,

Peter Thielen

Hello Peter,

Yes, now it is clear to me. But the requirements, you described is not in our feature. But my direction is – you must enqueue custom.css in function.php file. Then it will never be overwritten when an update comes out for the plugin / theme. If you are a coder you can do additional works in your child theme or you can hire a developer to implement this feature.

Hope you understand.

Thank You 🙂

I have a child with style.css but the stylerules herein get overwritten by bootstrap.css and green.css. So I can’t copy the content of green.css to style.css because it gets overwritten. To prevent this I have to use !important keyword but then more gets changed then I want. So I want to replace green.css by my custom.css.

Best regards,

Peter Thielen

Hello Peter,

It is very difficult to teach how to process the html,css. But I am trying my best to help you. You have to know how to catch a particular element with css class or id. Suppose you have a div->div->p. You can catch any element with css . Whatever custom.css or additional css file you have, the style you create in those files and browser always catchs the style in every css file and takes all and combine a file. Then the style can see in browser.

There are alternative as well as, what is, you have to change the html tag and make the style in custom.css then it will not overwritten.

Hope you understand.

Thank You 🙂

Thanks for explaining. But this is not what I mean, sorry. I know how to add stylerules to a css file to style classes from a webpage.
Let me explain with a example:

Dokan theme contains bootstrap.css and green.css. I made a child theme with style.css that gets loaded from functions.php. When a webpage is loaded the files are read in the following way:
1. style.css
2. bootstrap.css
3. green.css

This means that any changes I make to style.php get overwritten by the rules defined in the other two files. This can be solved by using the !important keyword. But then everything from every file gets overwritten.

Concrete example:

bootstrap.css contains the following rule:
a {
color:red;
}

green.css:
a {
color:green;
}

I want to change the color from style.css:
a {
color:blue;
}

All links are first made blue then red then green. So the end result is that all links are green. This can be fixed by using !important.

bootstrap.css contains the following rule:
a {
color:red;
}

green.css:
a {
color:green;
}

I want to change the color from style.css:
a {
color:blue !important;
}

Then the rule from style.css is used. But it also overwrites all other a{} stylerules resulting in every link being blue instead of just the ones after green.css is applied.

So that is why I want to use a skin custom.css. I hope you understand me?

Best regards,

Peter

Any update on this?

suppose you have a Html like this:

<div class="test">
  <a class="mytest">My Test Hyperlink.</a>
</div>

If you want to style the “My Test Hyperlink” text then you can hook this way :

.mytest {
 color: green;
}

or this way:

.test a{
 color: green;
}

It will take effect only the particular html element. Not the whole “a” of your document.

This is general rule for css with html.
So no need to do any custom.

Hope you understand.

Thank You 🙂

That doesn’t work because of the problem I tried to explain in my last post.