L’elle: Yellow Is The New Pink!

You can choose out of three themes, but still it’s not enough? Ofcourse not! You want your site to match your branch.

In this post we will change the L’elle’s lovely hallmark color, pink, into a yellow color instead.

Instead of editing the original files all over the place, let’s take the same approach as if we’re creating a theme override. In other words, let’s define a new CSS file that contains all nescesary style overrides in one single place.

NOTE: There are a few pink images that you would have to replace yourself!

Create a file ‘assets/css/theme_override_yellow.css‘. You can add this in addition to your other theme override. Now let’s change all the styles that provide a pink color and make them yellow instead (I found these styles by doing a file search on the string ‘rgb(237, 38, 137)‘, which is pink):

.chart>.bar_background>.bar {
 background-color: #f7d15b;
}

.coda-slider .caption {
 background-color: #f7d15b;
}

.coda-slider .caption {
 background-color: #f7d15b;
}

.button.pink_active:hover {
 background-color: #f7d15b;
}

span.highlight.pink {
 background-color: #f7d15b;
}

.list_lelle ol {
 color: #f7d15b;
}

.list_lelle a:hover {
 color: #f7d15b;
}

#main_share_icons a:hover {
 color: #f7d15b;
}

form.light button:hover {
 background-color: #f7d15b;
}

form.dark button:hover {
 background-color: #f7d15b;
}

.menucontent>ul>li>a:hover {
 color: #f7d15b;
}

.comment_entry h4 {
 color: #f7d15b;
}

.article .date {
 color: #f7d15b;
}

.article .readmore,.article .addcomment {
 color: #f7d15b;
}

.article .social>div.tweet:hover,.article .social>div.like:hover,.article .social>div.google:hover {
 background-color: #f7d15b;
}

#content_main .track_info span.via {
 color: #f7d15b;
}

#topnav .menu a:hover,#topnav .menu a.active {
 color: #f7d15b;
}

.lelle {
 color: #f7d15b !important;
}

#content_main .action_msg div:hover {
 background-color: #f7d15b;
}

#menu_main h3.selected a {
 color: #f7d15b !important; /* the same as #ED2689 */
}

#departments a {
 color: #f7d15b;
}

.error_subcribe,#content_main p.success {
 color: #f7d15b;
}

#our_friends>ul>li>a:hover {
 color: #f7d15b;
}

#newsticker .nav .item.active,#newsticker .nav .item:hover {
 background-color: #f7d15b;
}

.showcase_items>li>.overlay {
 background-color: #f7d15b;
}

#showcaseFilters li:hover,#showcaseFilters li.selected {
 background: #f7d15b;
}

#showcase_widget .previous:hover,#showcase_widget .next:hover {
 background-color: #f7d15b;
}

.cn-nav-content-current span {
 color: #f7d15b;
}

Comments are closed.