XF 2.3 Some custom style questions?

[philmckrackon]

I am trying to replicate this gradient (old VB8.5 style).



Is it possible in the admin >> appearance >> styles >> style properties >> ??
Or does it have to be done via CSS?
I drilled down to here.

 

[Gemma]

Is it possible in the admin >> appearance >> styles >> style properties >> ??

Not that I'm aware of, but maybe adding something like this to the extra.less template?

.node-body {
background: linear-gradient(180deg, #F8F7F1 45%, #ddd3ad 90%) no-repeat;
}

 

[philmckrackon]

Not that I'm aware of, but maybe adding something like this to the extra.less template?



View attachment 321367

TU, worked perfectly.


I added the div structItem-cell.structItem-cell--main to do the same gradient for the topic view but have not found the div for the stats. Thoughts on the div? (it's not block-body)

 

[Gemma]

I added the div structItem-cell.structItem-cell--main to do the same gradient for the topic view but have not found the div for the stats. Thoughts on the div? (it's not block-body)

Possibly this, I haven't tested though.

.structItem.structItem--thread {
background: linear-gradient(180deg, #F8F7F1 45%, #ddd3ad 90%) no-repeat;
}

 

[philmckrackon]

Possibly this, I haven't tested though.

TY for all the help (for me, PHP=Easy - CSS=WTF?). The above works but BOTH affect the complete page including widgets.


I am trying to just add gradient to the main body area.
I included this in extra.less but it removes all gradient from the complete page.

[data-template="public:widget_trending_content"] {
    .block-container
    background: none;
}

 

[Gemma]

TY for all the help (for me, PHP=Easy - CSS=WTF?). The above works but BOTH affect the complete page including widgets.

Make sure you are using .node-body, I think you've maybe put .block-body by mistake? The extra.less code should be

.node-body, .structItem.structItem--thread {
background: linear-gradient(180deg, #F8F7F1 45%, #ddd3ad 90%) no-repeat;
}

In know neither CSS or PHP

 

[philmckrackon]

Make sure you are using .node-body, I think you've maybe put .block-body by mistake? The extra.less code should be


In know neither CSS or PHP

Oops, I had both .node-body and .block-body in extra.less from a prior edit.

You know CSS at a much higher level than I!

 

[philmckrackon]

Just a FYI. Final code to duplicate the old VB style (just this part). I'll condense the code after I finish the style edits. Thanks.

// ********
// Add Gradient to Node & Thread Body
.node-body, .structItem.structItem--thread {
    background: linear-gradient(180deg, #F8F7F1 45%, #ddd3ad 90%) no-repeat;
}

// Change Node & Thread Links to Burgandy
.node-title a {
        color: rgb(135,8,7);
        text-decoration: none;
    }
.structItem-title a {
        color: rgb(135,8,7);
        text-decoration: none;
    }

// Change Node & Thread Hover to Orange
.node-title a:hover {
  color: rgb(232, 162, 75);
}
.structItem-title a:hover {
  color: rgb(232, 162, 75);
}
// *********

 

[philmckrackon]

@Gemma or anyone...
Thoughts on using :not to exclude stickys? I would like to apply a different color. .structItemContainer-group--sticky .structItem

This is not working:

// Add Gradient to Node & Thread Body Not Sticky
.node-body, .structItem.structItem--thread, :not .structItemContainer-group--sticky {
    background: linear-gradient(to bottom, #F8F7F1 45%, #ddd3ad 90%) no-repeat;
}

 

[Gemma]

This is not working:

Try this, changing the sticky thread colour to suit.

/* Add Gradient to Node and Thread Body Not Sticky */
.node-body {
    background: linear-gradient(to bottom, #f8f7f1 45%, #ddd3ad 90%) no-repeat;
}
/* Regular threads (non-sticky) */
.structItemContainer-group {
    &:not(.structItemContainer-group--sticky) {
        .structItem.structItem--thread {
            background: linear-gradient(to bottom, #f8f7f1 45%, #ddd3ad 90%) no-repeat;
        }
    }
}
/* Sticky threads */
.structItemContainer-group--sticky {
    .structItem.structItem--thread {
        background: linear-gradient(to bottom, #fff3d1 45%, #e2b764 90%) no-repeat;
    }
}

 

[philmckrackon]

Try this, changing the sticky thread colour to suit.

/* Add Gradient to Node and Thread Body Not Sticky */
.node-body {
    background: linear-gradient(to bottom, #f8f7f1 45%, #ddd3ad 90%) no-repeat;
}
/* Regular threads (non-sticky) */
.structItemContainer-group {
    &:not(.structItemContainer-group--sticky) {
        .structItem.structItem--thread {
            background: linear-gradient(to bottom, #f8f7f1 45%, #ddd3ad 90%) no-repeat;
        }
    }
}
/* Sticky threads */
.structItemContainer-group--sticky {
    .structItem.structItem--thread {
        background: linear-gradient(to bottom, #fff3d1 45%, #e2b764 90%) no-repeat;
    }
}

Thanks, stupid ampersand (&) got me!