I folks I have a problem which I solved on one page, but it has not fixed it on another...
There is a grey box that comes up over an image link which I am trying to get rid of.
It still shows up here:
http://1aproductions.ots-internet3.net/work/?cat=dramas
It does not show up here anymore: (On the three recent projects at the bottom)
http://1aproductions.ots-internet3.net
Here's the code I have used, which got rid of it on the homepage, but not on the other pages:
.pg-icon {
font-size: 30px;
line-height: 40px;
color: #252525;
display: none;
background-color:transparent ;
background: none ;
}
.pc-wrapper .icon-circle {
background-color:transparent ;
background: none ;
}
Any help would be much appreciated!
Thanks
You don't have a pc-wrapper class on your dramas page, that's why the code in .pc-wrapper .icon-circle is ignored.
Your other pages seems to have a pg-items-wrapper class in common, so this code will make it work :
.pg-items-wrapper .icon-circle {
background-color:transparent ;
background: none ;
}
Related
I'm a beginner dev and I have a class assignment which is making a WordPress site using a child theme customization (PHP/CSS/JS).
Here is the issue : for some reason that I've ignored, VS code is not recognizing the classes I use and they are the same ones that were working just fine before.
Here is the issue, you can tell some classes are in white instead of orange
.wp-block-button a:hover {
background: linear-gradient(#7864f4, #00aeef);
color: #fff;
border-color: linear-gradient(#7864f4, #00aeef;
}
.wp-block-button a:hover:before {
height: 200%;
}
/* end block button*/
/* menu hover */
.nav li:hover {
color: #00aeef;
}
.navbar-nav li:hover {
color: #00aeef;
}
If anyone has a solution for this it would be greatly appreciated.
In Visual Studio Code, click View then Problems for a list of problems in your source code. A web search for those problems will help solve much more significant errors.
The community has mixed feelings about homework questions.
We can show we value their time and help by describing our efforts to solve the problems ourselves. Example: "I googled VS Code double-red underline."
Line 4 of screenshot has a double-red underline indicating the spot of the syntax error:
border-color: linear-gradient(#7864f4, #00aeef;
=
There is a missing closing parenthesis character ):
border-color: linear-gradient(#7864f4, #00aeef);
=
Balancing parenthesis and other special syntax characters is one of the most common syntax errors across scripting and programming languages, you'll get used to watching for it.
For most IDE's like VS Code:
When your cursor is on a parenthesis, most editors will also indicate the matching parenthesis.
Highlight warnings and errors via underlining, highlighting, or other visual indications.
In this case, there should also be a red line in the code minimap, and a red dot on the scroll bar.
You're missing a bracket on the fourth line. CSS requires you to have opening and closing brackets in these types of instances.
The code below should fix it:
.wp-block-button a:hover {
background: linear-gradient(#7864f4, #00aeef);
color: #fff;
border-color: linear-gradient(#7864f4, #00aeef);
}
.wp-block-button a:hover:before {
height: 200%;
}
/* end block button*/
/* menu hover */
.nav li:hover {
color: #00aeef;
}
.navbar-nav li:hover {
color: #00aeef;
}
I have a QTabWidget with six tabs, and all the tabs have an icon -
but the icons are not in the center of the tab:
What I've done so far :
tabWidget->setStyleSheet("QTabBar::tab {width: 40px; height: 40px;}"
"QTabBar::tab:selected {background: lightblue;}");
tabWidget->setIconSize(QSize(40, 40));
tabWidget->addTab("widget", QIcon("iconPath"), ""); //<--for all six tabs
And:
tabWidget->setTabIcon(index, QIcon("iconPath"));
Any ideas why this is happening, and how I can fix it?
I too have been struggling with this issue. Here is how I resolve it.
Background:
I was attempting to get a left side tab menu going, which used icons as its indicators (what the users would see), however I had a problem:
My icons, which were set using the currentTabIcon in the Property Editor, were aligning to the bottom (which is expected since I am using the West orientation. Normally, the North orientation would be selected and the icons would be on the left).
I had this as my stylesheet:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
}
Now, attempting the suggested solution found in this post whereby I set the margins did not have the desired effect, infact it had no effect at all.
Solution:
After playing around with some of the CSS properties, I discovered that setting the padding-top and padding-bottom gave me the desired result.
adding the lines:
padding-top: -15px;
padding-bottom: 15px
Resolved the problem for me, however this needs to be changed according to your needs.
My final stylesheet resembles:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
margin: 0px;
padding-top: -15px;
padding-bottom: 15px
}
If somebody has the same problem like me with the icons in the tabs, I found a solution after days and days search for this, and its so simple :D
Just add this to the stylesheet for the TabWidget:
tabWidget->setStyleSheet("::tab {margin: 0px;}");
************
I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.
I tried with CSS but it is not working for the icon:
.ui-breadcrumb {
background: none !important;
border: none !important;
icon: url('resources/images/look/bandeau.png')
}
It should be enough with:
.ui-breadcrumb .ui-icon-home {
background-image: url("#{resource['images/look/bandeau.png']}");
background-position: 0; /* asuming bandeau.png is a single image */
}
But you have to make sure two things:
First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.
Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.
Try to target that specific icon by doing so:
.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
background: none !important;
border: none !important;
background-image: url('resources/images/look/bandeau.png') !important;
}
Also check if the background image hyperlink is correct.
I'm using Disqus external comment system with Wordpress (as a WP plugin) and I'm trying to customize it with my custom CSS.
Everything works great, but I have problems with replacing the default text color in the form textarea.
I tried it with:
#dsq-content .dsq-textarea .dsq-textarea-wrapper, #dsq-content .dsq-input-wrapper { color: red !important }
but I was not successful, even when I targetet just "textarea" it not worked.
It seems that javascript is playing together because there are 2 events: when the textarea is focused and blurred. When there is a "blur" then .placeholder-grey CSS class is added to the textarea, but targeting that with CSS not worked as well.
Disqus has very poor documentation, so I figured out all this with code inspection.
Any ideas would be really appreciated.
P.S. I don't have a working example online, you can see it on any blog/website where Disqus is used, for example on their own blog at: http://blog.disqus.com/post/974280725/achievement-unlocked-merging-profiles#disqus_thread
Depending on how the theme is laid out, Disqus may inherit a different text color which may be the same as the background. You can change it using the following override:
#dsq-content { color: #ffffff !important; }
If the text color still does not change, you will need to target comments more directly. This can be done with the following CSS:
.dsq-full-comment { color: #ffffff !important; } /*for Narcissus theme users*/
.dsq-comment-body { color: #ffffff !important; } /*for Houdini theme users*/
If you didn't solve it yet I found a solution that worked for me. Just a bit after the body{} tag in the style sheet of wordpress, you will find the ul{} in there change the color:#FFFFFF to color:#000000 (or what ever color you like). It worked for me and I hope it will work for you to.
body{
text-decoration: none;
background-color: #000000;
}
a:hover{
color: #FFFFFF;
}
a {
color: #CCCCCC;
text-decoration: none;
font-size: 14px;
}
li {
padding: 10px 10px 0px 10px;
}
ul {
list-style:none;
>>> color: #000000;
margin-left: 25px;
}
The site you link to has a css style block just before the textarea, if you edit this to add color: #f90; it'll change the color from the usual black to orange (in this example). Presumably you could also add this in the head of the document instead.
If you use something like Chrome's developer tools or, I imagine, Firebug for Firefox you can edit the html/css in place to see the effect live (although it won't persist) to see what changes you can, or need to, make.
The website you weblink to has a css design prevent just before the textarea, if you modify this to add color: #f90; it'll modify along with from the regular dark to lemon (in this example). Presumably you could also add this in the go of the papers instead.
Spybubble Free
I've a blog hosted on WordPress.com, and i purchased the "Custom CSS" update to modify CSS. Now I want to change some CSS options of Syntax Highlighting provided by Wordpress.com. For example, i want that
[code lang="C"] int main() { } [/code]
will be displayed with a black background instead of standard white one. I've added in Wordpress.com Appareance > Modify CSS the following code:
.syntaxhighlighter
{
background-color: black !important;
}
As explained here, but it doesn't works.
Any idea?
The solution is to not only change the background of the whole syntaxhighlighter, but also of each line, similar to this:
.syntaxhighlighter
{
background-color: black !important;
}
.syntaxhighlighter .line .number
{
color: white !important;
background-color: black !important;
}
/* First line */
.syntaxhighlighter .line.alt1
{
background-color: black !important;
}
/* Second line */
.syntaxhighlighter .line.alt2
{
background-color: black !important;
}
As you're using black as a background-color, i advise you to ensure that color has enough contrast compared to it.
Also, using the firebug plugin for firefox you can see exactly which CSS rule gets applied where, and which classes are availble for styling. (a must when working on hosted systems.)
BTW: I found the soluion at the second link you gave