I'm trying to put unique icons onto a custom tabs created using shortcode ultimate, but nothing seems to be working. It may be something obvious that I'm missing. I made three custom css classes that I've attached to each tab. In the css, each class has a unique icon image. Nothing appears in the tab (I don't want any text in the tab, just an icon).
My shortcode:
[su_tabs]
[su_tab class="my-custom-tab-1" title=""]
some content
[/su_tab]
[su_tab class="my-custom-tab-2" title=""]
some content
[/su_tab]
[su_tab class="my-custom-tab-3" title=""]
some content
[/su_tab]
[/su_tabs]
My CSS:
.su-tabs.my-custom-tab-1 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon1.png') }
.su-tabs.my-custom-tab-2 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon2.png') }
.su-tabs.my-custom-tab-3 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon3.png') }
.su-tabs.my-custom-tab-4 div.su-tabs-nav .su-tabs-current { background-image: url('http://livedemo00.template-help.com/wordpress_53881/wp-content/themes/theme53881/images/icon4.png') }
Any help is appreciated.
If you want to apply a background to the tabs, then use selectors like this -
.su-tabs-nav .my-custom-tab-1 {
background: url(..your url..);
}
.su-tabs-nav .my-custom-tab-2 {
background: url(..your url..);
}
.su-tabs-nav .my-custom-tab-3 {
background: url(..your url..);
}
Related
We have a web application built using Angular 9. It has colors for headers, borders and some menu backgrounds stored in multiple places in css files.
The ask is to change those as per client branding. So if ClientA logs in, they should start seeing those colors as #FF0000 and if ClientB logs in, they need to see those colors as #00FF00.
Other than inline styling every html with style="color:{{clientColor}} can you help suggest the best way to do this?
Thank you!
You can try to use :root selector and variables in it, and for body tag just overwrite these root variables, working example here: stackblitz
styles.scss:
:root {
--fontColor: #000;
}
.theme-dark {
--fontColor: red;
}
app.component.ts
export class AppComponent {
theme = 'theme-dark';
toggle(): void {
const body = document.body;
if (body.classList.contains(this.theme)) {
body.classList.remove(this.theme);
} else {
body.classList.add(this.theme);
}
}
}
app.component.html
<p>
Start editing to see some magic happen :)
</p>
<button (click)="toggle()">Toggle color font</button>
app.component.scss
p {
font-family: Lato;
color: var(--fontColor);
}
You can use this:
[style.color]="clientColor"
In my Contact Form 7 on WordPress, I would like to put checkboxes, only for some specific ones, in this way:
The official resource shows a simple css instruction to do it:
span.wpcf7-list-item { display: block; }
This instruction I have used it together with an ID selector as Contact Form 7 requires:
[checkbox test1 "option1" "option2" "option3" id:namefield]
To do that I have create an instruction in css file
#namefield.span.wpcf7-list-item { display: block; }
It is not working. Using browser inspector the code rendered is taken from /wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.9 and it is:
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;}
Instructions from my ID they are not showed.
I'm looking to understand the reason why and what it should better to do to put checkboxes in vertical order.
It's working with the code
#namefield span.wpcf7-list-item { display: block; }
without dot after ID
In WordPress menu, go to appearance -> customize -> custom CSS
Now write below code in custom css area
span.wpcf7-list-item { display:block; }
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.
Build a form Contact us by EMAIL me form I uploaded it to my server, and I want to change the CSS file the error location (when you click on the submit button, then all fields not filled properly marked an error - red) My question is simple: How do I can change the CSS file so that the error diaphragm on the left and not on the right? Thank you!
The form is in this link: http://lawb.co.il/HTMLPage.html
the CSS file is in this link: http://lawb.co.il/contact_us.css
You can see example for what I want here:
insted of this
Is is possible?
Add promptPosition:"topLeft" in contact.js:
EMF_jQuery("#emf-form").validationEngine({
validationEventTriggers:"blur",
scroll:true,
promptPosition: "topLeft"
});
And these lines in CSS:
.formError {
...
left: 360px !important;
...
}
.formError .formErrorContent {
...
width: 310px !important;
...
}
formError .formErrorArrow {
...
left: 70%;
...
}
It should work.
try this
align:left;
or
float:left;
I' like to add a different background image to certain pages - is there a way to adjust the following notation:
body {background: url('someimage.jpg');
to
someselector body:url('somedifferentimage.jpg');
perhaps a way to select based on the title or the html doc name?
Normally what you'd do is make a different stylesheet for each page and add the declaration. So just:
body {
background-image: url('somedifferentimage.jpg');
}
Linked to by the page you want to override. If that's not possible and a little more progressive enhancement is an option, you could try JavaScript of some ilk:
document.body.style.backgroundImage = "url('" + document.title + ".jpg')";
for example.
Add a class to your body tag where you want the custom style.
css:
.customBody {
background-image: url('somedifferentimage.jpg');
}
html:
<body class="customBody">
The more commonly-accepted way is to put a class on the body element:
<body class="specialpage">
And then apply the background only to <body>s of that class.
body.specialpage { background-image: url(...); }