i am using business one wordpress theme, i want to place a notice with bigger and bold text in the menu, so i created a menu item and added a new css class.
.myclass {
font-weight: 700;
color: #fff;
font-size: 24px;
pointer-events: none;
cursor: default;
}
`
This class only makes the menu item font bolder but the color and size stay the same?? Help would be much appreciated.
Your style could be overwritten byt the themes default style.
Try to write the style with the parent tags like
nav ul.classname .myclass {
/* Style*/
}
If it doesn't work then only use !important to write the style like
nav ul.classname .myclass {
font-weight: 700;
color: #fff !important;
font-size: 24px !important;
pointer-events: none;
cursor: default;
}
Related
I am trying to build a custom template from scratch for my Joomla 3.9 website. I am new to web design. I have been following several tutorials on how to set up menu style via CSS, but I cannot seem to find information on how to define the drop-down menu style. The menu items are defined in Joomla configuration, and the menu should be injected into the right place.
relevant lines from index.php:
<body>
<div class="nav">
<nav>
<jdoc:include type="modules" name="navigation" style="none"/>
</nav>
</div>
</body>
And from template.css:
.nav {
background-color:#FFA500;
position: sticky;
top: 0;
}
ul.nav { //this element needs centering
margin:auto;
width:80%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFA500;
}
ul.nav li {
float:left;
display:block;;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-right: 3px solid #bbb;
}
ul.nav li:last-child {
border-right: none;
}
ul.nav li a{
color: white;
font-size: 20px
}
ul.nav li:hover {
background-color: #e09100;
}
This code works fine for displaying the menu the way I want (except for not centering it in the screen, but that's not relevant) for simple menu items. However, if I add sub-menu items in Joomla Menu configuration, it gets all messed up. I want these sub-menus to be displayed in a drop-down fashion when the user hovers over the parent item with the mouse, but instead, right now these sub-menus are displayed below the parent item statically. Obviously, that's because I haven't written the code for that part yet.
Problem is, I do not know how to define the style for these sub-menu items, because they are not defined in the CSS, but instead, provided by Joomla. I cannot find any relevant documentation that would tell me the keywords to hook up to these items. Can someone tell me how to turn these sub-menu items into a nice drop-down menu when the user hovers the mouse over the parent menu item?
He everyone,
I was wondering how I can get the sale price to have a different color than the regular color. And have the regular price a stripe through it. Here is the link for the site: http://www.peachandhoney.nl/product/classic-chair/ but I also want it to show up in the product gallery list http://www.peachandhoney.nl/shop/. If had tried editing this with this code but it is not working it changes both the prices. Any advice on how I can achieve this?
.product .summary .price .amount {
color: #e78484 !important; }
}
Target the <ins> tag in your CSS
.product .summary .price ins .amount {
color: #e78484 !important;
}
I got it to work with using
.product .summary .price del .amount {
color: #000000;
text-decoration: line-through
}
.price ins .woocommerce-Price-amount {
color: #d98159 !important;
}
Try to add other classes that change color:
.sale {
color: green;
}
.regular {
color: black;
}
then change the classes by JS;
please consider to not use !important in your CSS.
It's bad practice.
It would be better if you could change the template as you like.
Anyway, it should work with:
.product .price .amount {
color: #e78484 !important;
}
.product .price .amount ~ .amount {
color: #111 !important;
text-decoration: line-through
}
You can achieve that using only CSS like this example:
.sale .price ins {
color: #ea1000 !important;
}
I have a webpage written in PHP that displays a table, and I use nvd3 to also show a graph based on the table, however according to this tutorial: http://lsxliron.github.io/nvd3Tutorial/ I should use several css stylesheets, inlcuding
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />
in my head for the page. I also use my own external stylesheet. However the linked one has the code
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
}
td,th {
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
table {
width: 100%;
display: table
}
,th,td {
border: none
}
*,*:before,*:after {
box-sizing: inherit
}
in it which messes up my table, short of either not including this stylesheet, explicitly overriding it with my own local css, or making the graph show in a new webpage is there anything I can do? And if those are my only options, how could I override the *,*:before,*:after section? It is making my headers off center
Thanks in advance
Edit:
The code being affected by
*,*:before,*:after {
box-sizing: inherit
}
is a div inside of a td used to space out my headings and subheadings, I added box-sizing: initial to the div, and it works fine now (everything was shifted to the left before). The box-sizing inherit was shrinking the content and increasing the margin.
materialize is not required for NVD3. I would ignore that part of the tutorial unless you want to use Material Design. If you do want to use materialize, then just make your selectors more specific.
e.g.
.my-table-wrapper td, .my-table-wrapper th {
padding: 15px 5px;
/* etc. */
}
put your CSS after all others
add !important to every rule you want to override
check with inspector in your favorite browser which rules you have to override additionally and do it also with !important
remember that the more specific your rule is the higher its priority: ul li a.menu-link will override a.menu-link for all anchors in ul>li
Example
td,th {
padding: 15px 5px !important;
display: table-cell !important;
text-align: left !important;
vertical-align: middle !important;
border-radius: 2px !important;
}
You only need to import the materialize fiel in your new css3 file, how you know css work over waterfall, that mean that whe your use import in css on the top of the page, that style will charge in the same css, and beacuse css work over waterfall all the last style overwrite the first style (As long as styles repeat themselves). Go:
#import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css");
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
padding: 0
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0
width: 100%;
}
*,*:before,*:after {
box-sizing: inherit
}
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
I've built my current site into a mashup of HTML & PHP. I originally embedded CSS to each individual page. I'm using a PHP include for the separate header & footer PHP files. I've linked the footer.php & header.php to their respective .css files, and it works to a degree, but it seems that CSS is "bleeding through" to both the header and footer PHP files.
For instance, I'll apply a dark gray to my body text & links to my footer.css file:
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #808080;
}
a:link {
color: #808080 ;
}
a:visited {
color: #808080 ;
}
body {
background-image: url();
background-repeat:repeat-x;
background-color: #000000;
}
.style4 {font-size: 13px}
-->
#footer { width: 100%; height: 20%; background: #181818 ; }
//footer-nav style
#footer-nav {
list-style-type: none;
padding: 0;
float: center;
}
#footer-nav li {
display: inline;
}
#footer-nav li a {
float: center;
text-align: center;
background: none;
margin-left: 15px;
margin-right: 15px;
text-decoration: none;
height: 23px;
line-height: 23px;
}
</style>
`
This is then transferring over to my header.php file and changing the links to a dark gray (which shouldn't be happening as I'm linking header.php to it's own header.css file).
What I'm essentially trying to achieve is a dynamic header & footer linking system on my website so that I can easily update all headers & footers site-wide by replacing just one file in case of an added link, service, etc.
If there is a more efficient way of doing this please let me know!
Technically, should only belong in the of your page, not in inline blocks (though it does work).
You would need to change your CSS to select just the region you want to apply the styles to in each case. For example all the CSS for your header should be prefixed with your top level header element, #header.
Right now you are just styling top-level elements and the last to load is taking effect.
You could try putting something like this on the background of the particular css.
Ex.
background: #181818 !important;