Updating to 1.2.0 and no working any custom CSS

Walys

Hi,

This days update my forum to 1.2.0 (before have 1.0.4) and update my PHP 7.3 to 8.0 and lose the custom CSS I have.

I implement this two options. All working perfect in 1.0.4 and no work in 1.2.0
May have changed the code so much between these updates?

Author label Custom CSS
Frames to Sign Up and Login Buttons Custom CSS

clarkwinkelmann

Walys do you mean the CSS has no effect, or it's been deleted from the custom CSS field?

You can try clearing Flarum cache or editing the custom CSS to trigger a rebuild.

The PHP version shouldn't have any impact on this. The Flarum version could have introduced new styles that conflict with the customization, but based on the descriptions in the posts you linked I don't think it should outright break those.

Walys

clarkwinkelmann

Thanks for reply.
About the question. Has no effect, the code is ok in the custom CSS field.

About clear Flarum Cache do it in the admin panel but nothing change.
About editing the custom CSS also made and re-save in admin panel but nothing change.

I have also gone a little further. Testing with a new Flarum installation in Freeflarum.com because now they are using v1.2.0 . Paste the same code that I have and the same... nothing change. :-/

I understand that if the update is high maybe from v1 to v2 it can break all custom CSS but if change is "minimal" and the same base...

THIS IS THE CODE NO WORKING FOR ME IN 1.2.0

Author label

div.PostStream div.PostStream-item:not(:first-child) article.CommentPost.Post.Post--by-start-user .Post-header h3:after
{
    content: "Author";
    background: #F05D1D;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    margin-left: 14px;
}

Frames Login Buttons

#header-secondary > ul > li.item-logIn  > button[title=" Acceder"] {
    border: 1px solid #E7672E;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    transition-duration: 1s;
    color: #E7672E;
    border-radius: 3px;
    width: 90px;
    text-align: center;
    font-weight: 600;
}

#header-secondary > ul > li.item-signUp > button[title=" Regístrate"] {
    border: 1px solid #4D698E;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    transition-duration: 1s;
    color:   #4D698E; 
    border-radius: 3px;
    width: 90px;
   text-align: center;
   font-weight: 600;
}

@media (max-width: 767px) { #header-secondary > ul > li.item-logIn  > button[title=" Acceder"] {margin-top:10px; margin-left:0;}

#header-secondary > ul > li.item-signUp > button[title=" Regístrate"] {margin-left:0;
}}

datitisev

Walys The second part of CSS doesn't work because we have removed the titles from those buttons, it seems. However, you should just be able to remove that part of the selector as, at least in core, the button is the only element in .item-signUp and .item-logIn

Walys

datitisev Many Thanks! With your tip the second part of CSS (Frames Login Buttons) work like a charm with only change a little padding.

Maybe have similar problem with the first part of CSS (Author label) ?? I paste the code I use in the first link in OP.
I have tried to change some things but I have little knowledge and I can't find the key.
could you take a look.? 😅

I paste here the correct CSS for "Frames Login Buttons" if any one need it.

#header-secondary > ul > li.item-logIn  {
    border: 1px solid #E7672E;
    margin-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    transition-duration: 1s;
    color: #E7672E;
    border-radius: 3px;
    width: 90px;
    text-align: center;
    font-weight: 600;
}

#header-secondary > ul > li.item-signUp  {
    border: 1px solid #4D698E;
    margin-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    transition-duration: 1s;
    color:   #4D698E; 
    border-radius: 3px;
    width: 90px;
   text-align: center;
   font-weight: 600;
}

@media (max-width: 767px) { #header-secondary > ul > li.item-logIn {margin-top:10px; margin-left:10;}

#header-secondary > ul > li.item-signUp  {margin-top:10px; margin-left:10;
}}

Walys

About the "Author label Custom CSS" I review the code and not view any element with this name post--by-start-user to find all the messages creates for the OP.

Now in this new Flarum version view all the message with similar class
All messages view that have the same labels with class "item-user" and "PostUser" for all.

Now how Flarum can differentiate the author post and the others users?
: 😅