Changing transparency for FA+

mono

Registered
Hi Russ,

I'd like to change transparency for Navbar and a page wrapper. I suppose I should do some edits with extra.less. Could you suggest me what? This is for Adara style.

Thanks!
 

Attachments

  • exmpl_fa.jpg
    exmpl_fa.jpg
    220.1 KB · Views: 44

Russ

Pixel Exit Staff
You should be able to actually just edit the background colors: Style properties -> Header and navigation

Navigation row, and selected tab, you can use the color picker and this slider to adjust it:

Screenshot_3.png
 

mono

Registered
You should be able to actually just edit the background colors: Style properties -> Header and navigation

Navigation row, and selected tab, you can use the color picker and this slider to adjust it:
Thank you @Russ. This is really easy
I have to say that this is the most pleasurable style to adjust)

But have few more questions:

main.jpg
On forums page I'd like to have control on forums names etc. I mean font, its size color and so on. The same for the last active topic links. And... how could I eliminate gradient in the sidebar?

message_contol.jpg
On message page I'd like to have control on font attributes in messages, quotes and action links. Couldn't find such adjustments. I also need to change the shape of thread page switcher.

message_wrap.jpg
And how could I control the wrapper in messages?

Thanks in advance for your help)
 

Russ

Pixel Exit Staff
So the headers inherit from :Style properties -> Blocks -> BLock headers

The node titles can be changed: Style properties -> Node/forum list -> Node titles. You can find all other node listing properties here as well.

Message fonts inherit from Style properties -> Typography -> Body Text Font

We have a property for the wrapper here: Style properties -> Messages -> Message block
 

mono

Registered
@Russ Thank you! That works. But what about sidebar gradient?

And one more question: How could I made backstretch longer than 10k?
 

Russ

Pixel Exit Staff
Sidebar properties can be found here: Style properties -> Sidebar -> Sidebar Header

Check out also: Style properties -> [XB] XenBase Framework -> Design mode, it's a little way of letting admins view certain properties available on the front end. I talk about it here: https://pixelexit.com/documentation/getting-started/

What do you mean by the backstretch longer than 10k?
 

mono

Registered
Sorry, have an issue here. Can't post a reply
 

Attachments

  • pixel_exit_issue.jpg
    pixel_exit_issue.jpg
    223.8 KB · Views: 28

mono

Registered
Try without quotes
I can't see nothing connected with gradient there.
exmpl_adara.jpg
Yes, I've tried this option too, but didn't find anything that could control gradient and its color.

In Adara Style Properties -> Page Setup there is an option "Duration" that control how long each image will appear on the background. I can set only 10000 maximum (milliseconds), but I need at least 1 minute.
 

Russ

Pixel Exit Staff
That's probably a limit that comes down to XenForo's style properties. I'm not sure of an easy way around that. I suppose you could just use our "Backstretch advanced setup". The easiest way to do that is copying your backstretch code from your page source (you'll need to inspect it and find the code at the bottom). Paste the code in the advanced setup and edit the values there. If you submit a ticket with the URL I can assist with it.
 

mono

Registered
Thank you @Russ! I've done it through advanced setup.
But I still can't find properties that are responsible for gradient in the sidebar and the shape of thread/message page switcher.
 

Russ

Pixel Exit Staff
Sorry, I've never seen that before really! Just found it, due to being cut off because of a long post. You can hide it using:

Code:
.p-body-sidebar .contentRow-fader {
    background: rgba(0, 0, 0, 0);
}

What do you mean by the thread/message page switcher? There's really no controls to change the style of them, you'll just need to use manual CSS.
 

mono

Registered
No problem, sorry for the long post.;) Thank you. It works

I mean this:
adara_ex3.jpg
If I should go to CSS where I could find it? I need to change padding in this case.


And one more thing:
adara_ex2.jpg
I've noticed that some elements in sidebar controlled by "Basic colors" -> "Muted text color" as some elements in forum/thread/message lists, descriptions etc. Is there a way to change color only for sidebar?
 

Russ

Pixel Exit Staff
Although this video is older, it's helpful for folks who need lots of little edits. It's made for XF1 but the technique still applies to XF2. Although you'll just add your CSS to the template extra.less:


For that unique sidebar I'd almost do something like the following:

Code:
.p-body-sidebar .block-body
{
        * { color: #FFF; }
        a { color: pink; }
        .pairs>dt { color: red; }
 }

The * should target most of the items in the sidebar and turn it white (#FFF).

Pink is for all links.

The last pairs is for that stats box left items. I made them different colors so you can adjust easily to whatever you'd like.


The breadcrumb you can change using something like this:

Code:
.pageNav .pageNav-page a, .pageNav .pageNav-jump {
    padding: 2px 4px !important;
}
 

mono

Registered
@Russ Thanks a lot for the video - really helpful.

Absolutely great! Everything works. Thank you so much for answering so many basic questions.

But the last one: is there a way to import style changes? Everything I've done were on test installation so it'll be great if I could export all of these things onto working style.
 

Russ

Pixel Exit Staff
@Russ Thanks a lot for the video - really helpful.

Absolutely great! Everything works. Thank you so much for answering so many basic questions.

But the last one: is there a way to import style changes? Everything I've done were on test installation so it'll be great if I could export all of these things onto working style.

To transfer, just upload your style folder from the test install to the live site.

Export the styles on the test style (parent and the child). DO NOT check the box on the overlay that pops up :).

Import in the same order: parent first, your style as a child of the parent.

Let me know if you have any questions.
 

mono

Registered
Hi,
Could you suggest how can I made different text colors for quotes in messages? (different to main message color)
 

Russ

Pixel Exit Staff
Style properties -> BB code elements -> BB code blocks, should be able to change it there.

For future support, though if you can, open a new thread for a new issue, it makes it easier for others to find the threads in case they have the same question.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.