Right way to copy css change from chrome dev tools - css

Newbie here, I am adding additional css to my wordpress theme while inspecting it with chrome dev tools.
For example, this element has the following styles (by default, provided by my theme):
.product p.price {
float: left;
margin: 0;
}
I want to add this:
padding: 10px 0;
And now it looks like this:
.product p.price {
float: left;
margin: 0;
padding: 10px 0;
}
When I'm done, do I have to copy the 3 lines from dev tools to my theme's additional css or just the one line I added? Does it matter if my additional css reads this:
.product p.price {
padding: 10px 0;
}
instead of this:
.product p.price {
float: left;
margin: 0;
padding: 10px 0;
}
Is there a right/wrong way when adding additional css to a theme?

I'm not familiar with the way wordpress does these things, but i doubt you want to edit the CSS into your template. Templates can get updated over time and when you update them it'll likely just remove all the old files and replace them with the newly downloaded versions - all your changes would be wiped.
I imagine wordpress either provides a separate place for you to override styles, or allows you to manually add extra stylesheets (fresh empty .css textfiles).
In either case, you'd only add your changes to the stylesheet.
Based on your example, the right thing to add would be:
.product p.price {
padding: 10px 0;
}

Related

Dynamically control page breaks with headers and footers in React when some components overflow

I am working on a report automation tool that will print out a monthly report with charts and graphs. The problem I'm having is with one component that may take more than 1 page to print. When I make the headers and footers appear on every page they cover part of the graphs instead of forcing the graph down below the header/above the footer.
So far I have tried several #media print options in CSS like the below code. Is there a better way to do this? Perhaps programmatically in Javascript? I would also like to keep a page count in the footers dynamically without relying on the default print option footers from the browser if anyone has some advice on that as well.
.kpi_wrapper {
break-inside: avoid;
margin: 10px 10px 10px 10px;
}
#media print {
#page {
margin: 0px;
margin-top: 5px;
}
html {
margin-top: 50px;
}
.menu {
display: none;
}
.upload {
display: none;
}
}

I can't override woocommerce.css

I've tried to override woocommerce.css using child themes, but still nothing.
Folder structures:
/home/project123/public_html/wp-content/themes/betheme/css/woocommerce.css
/home/project123/public_html/wp-content/themes/betheme-child/css/woocommerce.css
When I've tried to look at the page source the URL points to betheme not to betheme-child. What can I do?
I want to remove this lines, and I don't want to use !important because I want to use bootstrap to resolve some responsive problems.
.woocommerce .product .product_wrapper .product_image_wrapper .images {
width: 100%;
margin: 0;
}
Try adding an extra identifier such as the page class or an id
`.page-id-16 .woocommerce .product .product_wrapper #sampele-product .product_image_wrapper .images {
width: 100%;
margin: 0;
}`

WordPress - Reduce vertical space between main menu and Slider

I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…

How to change the code padding effect of gitbook?

This is the markdown code effect of stackoverflow:
Code from stackoverflow
Nearly no extra space at the beginning
And this is the markdown code effect of gitbook:
The extra blanks at the beginning is confusing for me. So I decided to change it by myself.
I did:
cd /usr/local/lib/node_modules/gitbook/theme/stylesheets/base
vim markdown.less
In which there is a code block which looks like:
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
I changed the font-size to 385% and border-radius to 0px. I used git serve . to restart my gitbook server, but the code effect didn't change.
I got these files which havs code keyword in the theme directory, which should I modify?
.//assets/app.js
.//assets/fonts/fontawesome/fontawesome-webfont.svg
.//assets/fonts/fontawesome/fontawesome-webfont.ttf
.//assets/fonts/fontawesome/FontAwesome.otf
.//assets/print.css
.//assets/style.css
.//javascript/utils/sharing.js
.//stylesheets/base/markdown.less
.//stylesheets/base/normalize.less
.//stylesheets/website/highlight/night.less
.//stylesheets/website/highlight/white.less
.//stylesheets/website/markdown.less
.//templates/book/includes/exercise.html
.//templates/ebook/includes/exercise.html
What else should I do?
This should be a comment, but you can't fiddle in comments.
As you can see below, the style information you've given doesn't include the styles you want to change, you've left out some important information from somewhere.
The code you've included is shown on the left, the problem you've described is on the right.
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
.described {
padding: 20px;
}
<code>fprintf(...);</code>
<code class="described">fprintf(...);</code>
To over-ride the Gitbook default styles, create a file called 'styles/website.css` in the root of your gitbook project.
Edit the book.json file and add the following to define the source of your own custom styles
{
"styles": {
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
}
Anything in this file will over-ride the Gitbook styles (if you get the names right).
Then find out the names of the html elements you wish to apply or change styles to using your browser inspector. Open your Gitbook project in a browser and right click on a code block, this brings up a menu with Inspect or Inspect Element.
You will need to restart gitbook serve when changing styles as it only reads the styles/website.css file on startup.
The styles I defined to over-ride the Gitbook ones can be seen in this Github Gist
https://gist.github.com/jr0cket/9cc41eb9dd0b6c6d091831be43fa3e42
The results of these can styles can be seen at:
https://practicalli.github.io/clojure/basic-clojure/
Thank you

Using SASS to check ancestor/parent elements with &

I'm still getting to grips with SASS. I want to check within a selector whether or not an element is within a certain other ancestor/parent element.
I have this:
p.key-name {
float: left;
padding: 4px 32px 0 2px;
}
li:last-of-type p.key-name {
padding-right: 0;
}
Works great, but is regular CSS so no surprise there. But I'd rather have that second selector grouped within the first, so I tried this:
p.key-name {
float: left;
padding: 4px 32px 0 2px;
li:last-of-type & {
padding-right: 0;
}
}
That doesn't work. I can see why by looking at the processed CSS, but I'm wondering if there's a way of using SASS to make this notion work.
Thanks for any help offered!
Edit: As explored in the comments, it turns out that the code works but there's a parent <li> higher up the hierarchy interfering due to a lack of specificity in the SASS (i.e. no class or anything more qualifying on the li:last-of-type). So the two snippets above are in fact equivalent _as long as there are no <li>s surrounding these ones.

Resources