Need help to adjust my CSS code - css

A few years ago I made some CSS code customization on my forum. Since then (probably, due to updates or some other reason), right now it doesn't show it right (the way it was). The idea is that I've got one color of a bg where there's a name of a poster and his avatar and then there's another color where there's text that he writes (verbiage of the post itself). I'm attaching the print screen on which I show what exactly do I mean.
Also I would tell what I did so far to achieve the effect (though it's not exactly right at the moment).
In file Themes/default/css/index.css (line 1921) I added this line of code:
background:url('http://idevsky.com/images/post_bg.png') repeat-y;
And also I changed the height to 0px from 11px in two places:
line 972 and line 987
You can see it if you go to:
http://idevsky.com/forum/index.php
Test account credentials:
j.smith qwerty
Then you click on John Smith (the only board) and then you go to "test" thread (the only one there).
There're 3 different colors:
1) the one where the poster name and avatar is (#dfecf5), it's the way it should be.
2) then there's one that covers the majority of post text area (#ebf3fb), it's the right color, it just doesn't spread right
3) then there's one irrelevant (wrong) color (#f0f4f7) which you can hardly see in the second post (the one that j.smith wrote) and it starts from the arrow point to the right.
print screen

Just remove your image and give it a background color also give your poster class a background color.
.post_wrapper {
background: white;
}
.poster {
background: aliceblue;
}

Search index.css and you change the background-color of .windowbg and .windowbg2 in the CSS file to #ebf3fb as the following:
.windowbg, #preview_body {[enter image description here][1]
color: #000;
background-color: #ebf3fb;
}
.windowbg2 {
color: #000;
background-color: #ebf3fb;
}
Check out this picture to help you find the code:
http://i.stack.imgur.com/MfJaB.png

Related

How to change color of SVG icon in only one instance

I am trying to style my website at mathbymiles.com and I am trying to color some social media link SVG icons in the footer of the website. I used the following code to change the colors to orange:
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
So this gave me this desired result:
HOWEVER, other instances of these svg icons are now orange, too like here, which is undesired:
How can I fix this?
Probably your question does not directly point to a problem. In fact, you need to guess the problem you are experiencing in order to find the problem. People may therefore see it as a question of poor quality.
If we come to the answer to the question,
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
The CSS code you wrote above includes features that predominate by nature to include other icons. See Class Selectors.
Let's rewrite this to affect only the icons below,
.social a.social-link svg.svg-icon
{
color: #FF6C00 !important;
}
Thus, when there is a suitable match, we force it to be orange with "! Important". But if there is no match, we leave it to their natural state. Feel free to write if you have any problems.
Note: Delete the one you added and replace it with the new one above.

How to get rid of this element or change its color?

I'm trying to get rid of the following element or change its color if it's possible - it's not a border, it's a background image. It's code looks like that:
.col-2cl .main-inner {
background: url(img/sidebar/s-right-s1.png) repeat-y right 0;
padding-right: 340px;
}
My question is, how can I get rid of this element? I'm trying to completely remove it on dark version of my website, but I just can't - I feel like I've tried everything (background: none;, etc). I can't completely delete the file because I need it on light version of my website. My site:
Any new value you will assign for .col-2cl .main-inner will hide that image.
In your case, you should show dark mod or at least define how dark mode is implemented. Is it changing attributes or just changing class names?
if it is changing class names, you should define your css code according to that change, for example, let assume in dark mode, you added the new class name to any div tag parent of .main-inner as .dark-mode.
Then, you can use the following code:
div:not(.dark-mode) .main-inner{ background: rgba(252, 252, 252, 0) !important; }
this code will make fully transparent of that section only when it is not on dark-mode.
But as I described you need to understand how dark mode changes your website structure. Maybe, it is not adding new classes but changing the all CSS file. Then you just need to edit that specific files.
You can use
.col-2cl .main-inner {
display: none; // In case it will not work, you can try to add !important before the semicolon.
}
or change the background property with
.col-2cl .main-inner {
background: url(new_background_image.jpg) repeat-y right 0 !important;
}

Wordpress + Flatsome Theme Appearance Display Limitation

Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.

Bootstrap: Change background-color of panel

I found some previous posts about this, but the mistakes of the ones I saw were obvious to me, and unfortunately I couldn't find an answer to my problem yet.
I'm using a primary panel of bootstap:
<div class="panel panel-primary">...</div>
I want to change the background-color of the heading, so I add this class to my CSS to change the background-color:
.panel-primary > .panel-heading {
color: yellow !important;
background-color: yellow !important;
border-color: #F6E3CE !important;
}
The background-color of the heading, however, just keeps it's blue. What irritates me about this is that the color (font color) changes to yellow, which shows me that I'm editing the right CSS block.
And I can change the background-color of the panel-body just the same way which works fine also.
Any ideas about this?
Here's a screenshot to see that it's only the background-color that won't change:
You need to use background-image or background property to override the default background color.
like this
background-image: -webkit-linear-gradient(top,yellow 0, #dbff46 100%);
or
background:yellow;
you need to be more specific with your code, you didnt mention how your elements are structured, the A > B selector means that it will match the element B that has an element A parent. To help you more with your question maybe add some code snippet so you can get help.
Sorry, I'm very new to stackoverflow. It seems that I have to add a new comment to post another screenshot.
Now this is really strange, when I identify the source of the file "gradients.less" in chrome, I get this Screenshot.enter image description here
According to this picture, I have a directory ../bootstrap/css/less/mixins/gradients.less
But actually the directory that I have is: ../bootstrap/css and there are only files in this, like "bootstrap.css" - no subfolder "less" - no subfolders at all.

Wordpress Page Content not showing

I've recently started a new website with Wordpress through blue host.
I'm completely new to this and had never even heard of either of these programs up until last week.
I downloaded a theme from Mojo marketplace linked to blue host called Solstice. I've managed to make some customer changes and get some pictures and pages and post headers on there.
The only trouble I'm having right now is that I've wrote text in the About us section but it doesn't show up on the website. I haven't downloaded any plugins yet and the template it still set to default.
I have tried googling the answer but not had much luck.
Any help would be greatly appreciated.
www.2lostbuffaloes.com
As Naveed mentioned, the text color is white, over white background, that's why you can't see it. If you add to your css this rule:
body {
color #000000;
}
The text should appear.
You will probably also want to add white to the text color of the footer:
.footer-top, .footer-top a {
color: #ffffff;
}
In style sheet, you need to do
body{
color : #000000;
}
Right now its white color for text, if you do control A on about us page you will see all text.

Resources