Content ::after pseudo element with the logo

[Lyfesaver 73]

My goal is pretty basic "Add text after the logo", but I am not finding the best flow to get it to work.

 

Changing HTML is not really an option due to the way the web app is driven and due to any HTML changes that I could get away with would be overwritten (and rightly so) to ensure everything works properly.

 

So, CSS to the rescue. Specifically the ::before and ::after content pseudo elements.

 

Playing around with various CSS methods inside pageTitle, pageTitleWithLogo or pageTitleWithDefaultLogo does not seem to have any effect.

 

Any help with this would be great

 

Thanks so much!!

[Happy2Play 9441]

Can provide a specific example?

[Lyfesaver 73]

Can provide a specific example?

 

Absolutely. The following example should place the text after the Emby logo for it to show LOGO Web App (with Web App in green color)

 

pageTitleWithLogo::after {

conent: ' Web App';

color: green;

}

 

it's "after" so it tshould place that text after whatever content is in pageTitleWithLogo which in this case would be the logo.

[Happy2Play 9441]

 

Absolutely. The following example should place the text after the Emby logo for it to show LOGO Web App (with Web App in green color)

 

pageTitleWithLogo::after {

conent: ' Web App';

color: green;

}

 

it's "after" so it tshould place that text after whatever content is in pageTitleWithLogo which in this case would be the logo.

 

 

Something like this.

.pageTitleWithLogo:after {
    content: ' Web App';
    position: absolute;
    color: green;
    left: 10%;
}

[Lyfesaver 73]

That did it, thanks. I don't know whyit was not working for me. The only one of the options you ued that I did not was left: 10%;

 

But hey, I am just glad it works. Thanks so much!!!!!! As always, you rock!

[Happy2Play 9441]

I believe it is do it being a image placeholder it doesn't know a position to apply the content so both image and content were overlapping.

[Lyfesaver 73]

Follow up - kinda off topic question for you @@Happy2Play

 

Is there a simple text file I can edit that holds the custom CSS? I am doing a lot of work on CSS and a good amount of trial and error. The user experience in my three browsers of editing that CSS text box is horrific. Jumping to the top and such.

Edited December 1, 2018 by Lyfesaver

[Happy2Play 9441]

Follow up - kinda off topic question for you @@Happy2Play

 

Is there a simple text file I can edit that holds the custom CSS? I am doing a lot of work on CSS and a good amount of trial and error. The user experience in my three browsers of editing that CSS text box is horrific. Jumping to the top and such.

 

Well the custom css box saves everything to the branding.xml (\Emby-Server\programdata\config).  But editing it directly won't load the changes.

[Lyfesaver 73]

Well the custom css box saves everything to the branding.xml (\Emby-Server\programdata\config).  But editing it directly won't load the changes.

 

 

Crud

[PenkethBoy 2066]

@@Lyfesaver

 

try this at the top of your css box - should make it behave better

 

/* CSS Box */

#txtCustomCss {height: 300px !important;  overflow-y: scroll !important; }

[Lyfesaver 73]

 

@@Lyfesaver

 

try this at the top of your css box - should make it behave better

 

/* CSS Box */

#txtCustomCss {height: 300px !important;  overflow-y: scroll !important; }

 

 

OMG THAT IS SO MUCH BETTER!!!!!!!!!!!!!!!!!!!!!!!!!!

[Happy2Play 9441]

  I forgot about that change.  Buried in Emby Dark Themes in different accent colors custom css.