• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Unable to find these properties in style manager...

JVCode

Well-known member
#1
I'm banging my head right now because I'm unable to find the following in style properties...

  • (See the yellow marked areas)
Capture.PNG

  • The yellow behind the text input area...
Capture1.PNG

  • The yellow behind the text input area...
Capture 3.PNG

  • How do I remove the arrow in the image below ?
Capture 4.PNG

Thanks very much :)
 

Brogan

XenForo moderator
Staff member
#2
Not everything is in Style Properties.

The easiest thing to do is use one of the browser inspection tools and utilise EXTRA.css.
 

erich37

Well-known member
#3
you can change the background for the fields (this will change ALL fields) from white to some other color with this:

Code:
.textCtrl
{
background-color: #FFCC33;
}

However, when the field is active (when you click into the field), the yellow gradient is an image......
http://xenforo.com/community/threads/gradient-images-color-in-image-change-color-to-css.50331/

you would need to change the image itself in order to change the color from "yellow" to something else, since the color is build into the image. it is not using CSS for the color.

:coffee:
 

erich37

Well-known member
#4
in order to change the color of the line (your very first screenshot), put this code into your template "extra.css"

Code:
.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
    border-bottom: 1px solid #DDDDDD !important;
}
 

JVCode

Well-known member
#5
Thanks very much, the above edit worked lovely for the forum home, what about profile, who's online and thread list? :)

Capture 6.PNG

Capture 5.PNG

Capture 7.PNG
 

erich37

Well-known member
#6
this is for the Profile:
Code:
.messageSimple {
    border-bottom: 1px solid #FFCC33 !important;
}

this is for the thread-list:
Code:
.discussionListItem {
    border-bottom: 1px solid #FFCC33 !important;
}
 

erich37

Well-known member
#7
but you could just use this code, then the color of the line should change everywhere in one shot :D

Code:
.primaryContent {
    border-bottom: 1px solid #FFCC33 !important;
}
 

napy8gen

Active member
#8
Actually the border concerned is in style properties, go to appearance--->style properties -->building blocks---> primary content--> Look at border bottom.

The yellow gradient inside text field look under Forms--> text control, focused state --> clear the gradient bg image.
And maybe you should do also text area, focused state.


And for user info arrow, paste inside extra.css
Code:
.messageUserBlock .arrow {display:none!important;}