Flat Awesome - PixelExit.com [Deleted]
- Thread starter Russ
- Start date
-
- Tags
- pixel exit
I would like to have a different image icon for each forum (node), but not FA icons - actual jpgs/gifs. I've seen where you posted how to do it with FA icons, but not with your own images. This post Flat Awesome shows how to do it with FA icons and the sample code for extra.css is
So how do I change it to use actual images stored on the server? Thank you!
Code:
.node_15 .nodeIcon .fa-comments:before
{
content: "\f10c"; /* Change icon using unicode */
}
.node_14 .nodeIcon .fa-comments:before
{
content: "\f121";
}
.node_2 .nodeIcon .fa-comments:before
{
content: "\f11d";
}
.node_3 .nodeIcon .fa-comments:before
{
content: "\f06d";
}So how do I change it to use actual images stored on the server? Thank you!
I think I've found a problem(bug?) with the style on mobile phones. I noticed this problem before, but it has become worse after I added a background image. I'm using xenforo 1.4.10.
Within "Flat Awesome Properties -> Background Top Helper ->Background"
I set it to an image and made it 500px long. This looks great on my forum using a desktop web browser. However, on mobile, the background image shows up first on loading the screen, then slowly all the elements completely cover it up. I understand mobile hides the background on purpose, which is fine. However, the image popping up first on the screen looks really tacky and also slows down the browser loading. Eventually, it is fully covered up and looks fine (which is ok) but the load process just looks really bad with Chrome on my android phone. It's also unnecessary since the background is never shown on mobile. Even without using a background image, the default blue color would do the same thing and eventually be covered, causing a weird mobile load process.
Is there a way to make it so this background image or background color never load for mobile users? Or somehow loads last (already covered up)? Removing the background for mobile would be better for page speed as well.
Within "Flat Awesome Properties -> Background Top Helper ->Background"
I set it to an image and made it 500px long. This looks great on my forum using a desktop web browser. However, on mobile, the background image shows up first on loading the screen, then slowly all the elements completely cover it up. I understand mobile hides the background on purpose, which is fine. However, the image popping up first on the screen looks really tacky and also slows down the browser loading. Eventually, it is fully covered up and looks fine (which is ok) but the load process just looks really bad with Chrome on my android phone. It's also unnecessary since the background is never shown on mobile. Even without using a background image, the default blue color would do the same thing and eventually be covered, causing a weird mobile load process.
Is there a way to make it so this background image or background color never load for mobile users? Or somehow loads last (already covered up)? Removing the background for mobile would be better for page speed as well.
The Grand Potentate
Well-known member
enjoy your off time.
Rusty Snippets
Well-known member
Where do I set the social icons links?
The Grand Potentate
Well-known member
Search the thread. Russ has said it at least 53 times now.
Russ you've really got to bake that into the options, just to save yourself from continually having to answer this.
Rusty Snippets
Well-known member
Is there a way to search just the thread? All I see is up top of page, and it searches entire site.
Steve F
Well-known member
Rusty Snippets
Well-known member
Thanks. I had looked through templates, but didn't know which one it was.
Russ
Well-known member
I've added it into the FAQ:
Flat Awesome
Please see FAQ:
Flat Awesome
Unfortunately the browser will still download the images even if you use media queries. Best thing to do is to optimize the images you load
Kraken.io Image Optimizer
Code:
html #logo {
float: none;
text-align: center;
}In extra.css should do it.
This should work:
Code:
.nodeList .node.node_12 .nodeIcon
{
background: url(@imagePath/xenforo/node12icon.png) no-repeat center center transparent !important;
}
.nodeList .node.node_12 .nodeIcon .fa
{
display: none;
}Need to change the node# of course.
Russ
Well-known member
For the message bit:
Style Properties -> Message Layout -> Message
The BBCode stuff(quotes/code) can be adjusted by going to : Style Properties -> BB Code Elements, there's a few places to adjust it though: BB Code Block // Type Row // Pre Code
Can some one support me with this?
Blakefire
Active member
-snipped-
@Russ I figured it out, new question tho. How do I change the background image(The area in black) with an image of choice? And how do I make the area in red transparent? i have this code put in so it matches the rest of the site for now but that inst transparent.
I've tried this as well
but that just gave me a black box, any ideas?
@Russ I figured it out, new question tho. How do I change the background image(The area in black) with an image of choice? And how do I make the area in red transparent? i have this code put in so it matches the rest of the site for now but that inst transparent.
Code:
#header #logoBlock .pageWidth .pageContent {
background-image: url("styles/Images/header.png");
background-repeat: no-repeat;
}
html #logoBlock
{
background-color: #eef0f4;
}
Code:
#header #logoBlock .pageWidth .pageContent {
background-image: url("styles/Images/header.png");
background-repeat: no-repeat;
}
html #logoBlock
{
background-color: transparent;
}
Last edited:
Russ
Well-known member
Try this in extra.css:
Code:
html .attachment .thumbnail .genericAttachment
{
background-image: none;
line-height: 36px;
text-align: center;
}
html .attachment .thumbnail .genericAttachment:before
{
color: @contentText;
content: "\f019";
font-family: FontAwesome;
font-weight: normal;
font-size: 30px;
}Sorry for the late response, missed ya in my last batch.
@Blakefire
Use just
Code:
#logoBlockTo target the entire top area, or am I missing what you're trying to do
Thank you, that fixed the problem!
Blakefire
Active member
Navigate to the Flat Awesome style properties and in the settings remove the node icon path they have set, then go back to the style properties and find node icon and set up your custom icons there.
