I have a menu called XYZ-spanish and created another one called XYZ-english. I want to apply the same CSS style to my new menu but it conditional based on the Joomla menu type name. The css it applies is in /web/templates/templatename/css/custom.css, but I have yet to find how it ties it to the menu-type name.
I have grepped through the whole directory tree with grep -r 'XYZ-spanish' * and grep -r '.scrolltojsmenurightcustom' * which is the class name is applies to the menu. However I have checked the modules and none of them have any classes applied to them. The only clue I have that is I change the menu type name the styling gets removed. I'm going bananas looking for how it's applying it? Where should I look?
I have also searched through the database looking for both words and have yet to locate anything significant.
The only thing listed in the custom css is:
.scrolltojsmenurightcustom {
color: #ff5c00 !important;
padding-top: 0em !important;
line-height: 0px;
}
This depends on which menu system are you using, is your menu an extension? or part of your template?
Also you can use a tool like Firebug or similar to inspect the source code of your page in your browser.
A tool like this will give you information about the selectors and the path where they are located, the line number and the name of the file that contains this selectors. Once you have this information you can add or change the values of the CSS.
Related
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
I've made a website using the academic theme of hugo; there's an example provided here. I want all of my posts (of which there are three examples provided at the link) to be wider. For example, a post initially looks like this:
where the text is constrained within a more narrow window, but I want it to look like this:
where the text has the same width as the page.
I notice that I can make this happen by unchecking the 'max-width' specification in '.article-container'. How can I edit my local files for my personal page with the academic theme to make it so this automatically happens?
This may be done by overriding the CSS in the .article-container selector.
.article-container {
max-width: none;
}
The simpler way is to create a file layouts/partials/custom_head.html where you place the above CSS rule inside a <style>...</style> block.
Another way is to create a file assets/css/custom.css with that rule, and then updating the property plugins_css in the file config/_default/params.toml so that the new stylesheet can be included as part of the loaded stylesheets.
plugins_css = ["custom"]
I'm trying to modify the css style of the word (button) "All" in Post Grid filter of Wordpress plugin Visual Composer...I'm able to do it for all the words of filtered categories but not for the specified one "All"...Firebug show me that style: <span data-vc-grid-filter-value="*">All</span> where I suppose the symbol * define all the words of categories...Anyone knows how can I modify that style?
Without example code it is always hard to answer.
Maybe this helps:
span[data-vc-grid-filter-value]:first-child {
font-weight: 700; /* just an example adjustment */
}
I assumed that "All" is the first element in a series of elements. If this selector does not work, try to go more specific (e.g. li > span[data-vc-grid-filter-value]).
If you can provide a sample of the page, where this element is located, and the corresponding CSS, then the answer may be more helpful.
Basically what I'm trying to do is copy this style (from a word doc) but using rst.
I was thinking I might need a custom directive which I can can include the header and style the internal checkboxes.
Ideally I would like to be able to do something like:
.. handson::
The title
- Check one
- Check two
The bulltet items inside the handson block would be styled as checkboxs but the rest of the document would just have normal bullet points.
I had a look at the custom directive stuff but I'm not sure if that would be the best way to tackle this. I'm also using rst2pdf if that has any impact on the results.
If you don't want to go down the route of creating a custom directive, you could use a normal admonition block and "fake" the check boxes. Your markup could be standard reStructuredText:
.. admonition:: The title
- Check one
- Check two
You can then include some custom CSS markup within your reStructuredText file to target list items in admonitions:
.. raw:: html
<style>
.admonition ul { list-style-type: none; }
.admonition li:before { content: "\2610"; }
</style>
Here the CSS targets any list item element which is a child of any element with the class "admonition" and replaces the list item bullet points with simulated check boxes using the Unicode Ballot box character, ☐.
Docutils applies an additional class to generic admonitions which is a concatenation of "admonition" and the admonition title. So in the above example we could be more specific with the element we target with the CSS rule:
.admonition-the-title ul { /* ... */ }
This could be used to target a single admonition within your document.
Credit goes to these two answers to the SO question How to create a checklist in reStructuredText (reST)?
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.
I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}