Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Changing Link colors in EmbedFriendly theme

edited January 2011 in Vanilla 2.0 - 2.8
My site: hooligans-gaming.net/forums

The site is yet to be completed by I want my vanilla forum to seemless integrate and I'm having trouble changing the link colors to what my site has. I was able to edit some but not starting link color. I want ALL links to be under my control as well, seems there are a lot of CSS "a" declarations on this theme...

The custom.css:

#Body {
margin: 0;
width: 99.9%;
position: relative;
}
#Head {
background: #333333;
padding:0;
margin: 20px 20px 0;
text-align: left;
position: relative;
}

/* MY LINK CSS - START */

a
{color: #2d9c13;
text-decoration: none;}

a:hover
{color: #fea702;
text-decoration: none;}

/* MY LINK CSS - END */

div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
background: #333333;
border-bottom: 1px solid #2d9c13;
}
.Banner {
padding: 10px;
text-align: left;
position: relative;
}
.Banner ul {
background: #2d9c13;
padding: 0;
margin: 0;
}
.Banner ul li {
display: inline;
padding: 0;
margin: 0;
}
.Banner ul li a {
font-weight: bold;
padding: 3px 6px;
font-size: 11px;
color: #fff;
display: inline-block;
}
.Banner ul li a:hover {
}
.Banner ul li a.SignOut {
font-weight: normal;
position: absolute;
top: 10px;
right: 10px;
}
.Banner ul li a span {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 1px 2px 0 1px;
border-right: 1px solid #a00;
border-bottom: 1px solid #a00;
font-size: 9px;
position: relative;
top: -3px;
}
#Content {
float: none;
width: auto;
margin: 0 280px 0 10px;
}
#Panel {
float: right;
margin-right: 10px;
}
#Panel div.SearchBox input.InputBox {
width: 200px;
margin-right: 4px;
}
div.SearchBox {
margin-bottom: 6px;
}
body.Profile div.SearchBox {
display: none;
}
body.Profile #Content {
float:none;
width: auto;
margin: 0 10px 0 280px;
}
body.Profile #Panel {
margin: 0 0 0 10px;
}
form.Activity textarea {
width:99%;
}
#Foot div {
width: auto;
}
body.Post #Content {
margin:0 20px;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
width:99%;
}
#ConversationForm form {
border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
clear: none;
}
#DiscussionForm form {
border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
border-bottom:1px solid #ccc;
}

/* Tabs */
div.Tabs {
background: none;
padding: 0;
border-bottom: 1px solid #aaa;
}
div.Tabs ul {
padding: 0 8px;
white-space: nowrap;
}
div.MessageForm {
padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
font-size: 11px;
margin: 0;
border: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: none;
text-decoration: none;
padding: 8px 10px;
line-height: 11px;
}
div.Tabs li a:hover {
text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
margin: 0;
border: 1px solid #aaa;
border-bottom: none;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
display: inline-block;
font-size: 12px;
line-height: 12px;
font-weight: bold;
text-decoration: none;
padding: 6px 10px;
position: relative;
top: 1px;
}
div.Tabs li a span {
line-height: 1;
font-size: 80%;
padding: 0 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: normal;
margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
font-size: 11px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-top: 1px solid #aaa;
border-top: 1px solid #aaa;
margin:0;
padding:4px 8px;
}
div.HeadingTabs ul {
margin: 8px 0 0;
}
body.Discussion a.Bookmark {
margin: 6px 2px;
}
div.Preview {
border: 1px solid #aaa;
margin:0 0 8px;
padding: 8px;
}
.Foot {
background: none;
border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: none;
border: none;
line-height: 1;
padding: 0;
text-decoration: none;
}
div.MorePager a:hover {
text-decoration: underline;
}
body.add #Content {
margin: 0 10px;
}

/* Panel Boxes */
#Panel div.Box {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background: none;
padding: 0;
}
div.Box h4 {
color: #333;
}
ul.PanelActivity,
ul.PanelInfo {
border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
background: none;
border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
background: #ffd;
}
#Status {
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #eee;
color: #000;
line-height: 1.6;
padding: 3px 6px;
margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
border: none;
}
body.Profile ul.PanelInfo li {
margin: 0;
padding: 0;
}
body.Profile ul.PanelInfo li a {
font-size: 12px;
display: block;
padding: 0 6px;
}
body.Profile ul.PanelInfo li a:hover {
}

/* Sign In Page */
body.Entry #Content {
text-align: center;
margin: 0 auto !important;
}
body.Entry #Content div.Box {
background: #efefef;
border: 0;
}
div.Methods {
border-left: 1px solid #ccc;
}

/* Messages */
div.DismissMessage {
background: #ffd;
border: 1px solid #ccc;
padding:6px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
color: #000;
}
div.Warning {
background: #d00;
border: 1px solid #b00;
color: #fff;
text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
color: #fff;
}
#Content div.Box {
color: #000;
background: #D3F0FF;
border: 1px solid #A5D0E7;
}
body#dashboard_entrycontroller_signin div.Box {
border: none;
}
/* Autocomplete */
.ac_results {
border: 1px solid #d7d8da;
color: #000;
border-top: 0;
background-color: white;
}
.ac_results li {
border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
border-bottom: 0 !important;
}
.ac_results strong {
background: #dbe1ec;
}
.ac_over strong {
background: #5670a6;
}
.ac_over {
background: #2d9c13;
color: #fff;
}

------

I really need help with this to get my site up and running... thanks for any help!!

Comments

  • Options
    Can anyone help me figure this one out?
  • Options
    Why does it seem so hard to change some colors? I also find that when you go to post a new topic, it's not fit inside my embed... where can I find the "default" Vanilla CSS sheet and not just the custom.css?

    I think that may be the key... someone please help me!
  • Options
    I second that. I can't seem to change the color of the links in the Embed Theme. I've modified the theme quite a bit, but the link colors won't change. Can anyone help?
  • Options

    It's been a while...but did anyone find the solution to this? I've been pouring over my CSS all day and can't seem to figure out the problem.

    I was considering whether the answer is to add code to the default.master.tpl file of the theme, but frankly I'm a little nervous that I'll break something. :)

    I try my best to come up with answers by using my brain and reading but just can't find the solution to this one. Am I looking in the wrong place?

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited November 2012

    you need to add something like this to affect the global links, unless they have a style in the default css, then you need to affect each one by name. Find the name of each link.Also each body may also have a style to the links for example the forms. You just need to find all of them. There are many and not all respond to a or a:link but you can also use !important to force it. That will override the defaults.

    a, a:link, a.Button, a.Button:link, a.img:link, a.BigButton, a.Menu:link, a.BigButton:link,a.Category,a.Cancel{
    color:#adadad!important;
    font-size:10pt;
    font-weight:700;
    text-decoration:none;
    }
    
Sign In or Register to comment.