How to style CSS background for Home Widgets 10-13 in Epik

Tagged: css, epik, homepage, style, widgets

This topic has 5 replies, 2 voices, and was last updated 9 years, 7 months ago by Wes.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
November 3, 2013 at 3:55 pm #8673
Mike
Customer
I’m trying to style for square wraps around the Epik Home Widgets 10-13.

Basically, trying to uniquely style display/hovers and use font awesome.

I’ve created a div id called #homequadbox and put this code in style.css
```
#homequadbox {
    color: #9FCA05 !important;
    font-size: 21.5px !important;
    font-weight: 500 !important;
    line-height: 60px !important;
    padding: 4px 19.5px 19px 31px !important;
    text-shadow: 0 0 #111111 !important;
}
```
Then I’ve inserted a text widget into home widget sections 10-13:
```
<div id="homequadbox">
<center><i class="icon-signout icon-5x"></i>
<h2>Free Hotel Articles<h2><center>
</div>
```
The above icon and text are showing perfectly… but not CSS styles.

Any expert pointers? Thks
November 3, 2013 at 3:56 pm #8674

Wes
Moderator

Do you have a link where this is setup so I can take a look?

November 3, 2013 at 4:01 pm #8675

Mike
Customer

. thks

November 3, 2013 at 4:09 pm #8676

Wes
Moderator

Did you post it?

If so, and it’s not showing up, you should be able to add it in just like this https://appfinite.com/ and when you hit submit it will automatically turn it into a hyperlink here in the forums….just make sure and include the http://

November 3, 2013 at 4:13 pm #8677

Mike
Customer

http://www.mikemetcalfe.co and down the bottom

November 3, 2013 at 10:23 pm #8681
Wes
Moderator
You may want to go through your css and remove some of the errors that are there. As you may already know, if you forget to close out a line, or if you add in an extra bracket, or anything it will cause other parts of your css to malfunction. For example, I saw this on line 2183 –
```
.says {display:none;}

}
```
…which is obviously one too many brackets. So make sure and fix that and any others that you find. I’d recommend running your site through a validator so it can locate all of the errors for you. Give this a try first – http://csslint.net/ and you can use W3c if you want as well.

I didn’t see the <div id="homequadbox"> code in your source…but even when I added it, it didn’t have an effect. Although when I copy/pasted the css code for #homequadbox at the top of your css (before any of the errors) it worked. I noticed the color of the icon changed. I’m almost certain the reason it’s not working is because you may have some errors. So scan through and hunt down those errors and everything should work again.

Everything is looking good so far 🙂 I’ll add it to the showcase if you can let me know when you’re done with it – https://appfinite.com/showcase-your-site/
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.