"Line number" colors

[ajtruckle]

I can't work out where in the customizer I change the colour for the left hand column line numbers.

I checked with Inspect Element and could not see.

[ajtruckle]

So I have need trying your latest beta and I see you have new features for the line numbers. :)

Look here.

It looks really great - thanks! The only thing I noticed. Take for example, the way:

It would be great if the new "line number" controls obeyed the highlight / hover highlight colours. This way the focus line number will stand out a little better. See?

[AndiDittrich]

you should really take the time to create a full custom theme - the customizer is not designed to provide a 100% customization - it should be used as a starting point for own themes.

the problem is, that there are a lot of possible css classes which can be changed and it is nearly impossible to cover 100% of all settings

[ajtruckle]

I understand you. But here is the thing - I like this theme 99%. So i don't want to have to re-construct a whole theme for the 1% which your customiser has catered for fantastically. :)

I do understand where you are coming from!

[AndiDittrich]

you just have to copy+past the css and add some rules manually...it's very simple...

[ajtruckle]

OK - maybe I will take the plunge. Sounds scary! Do you have a doc covering the basics of what to do or something about doing this?

[AndiDittrich]

no...just learn css...

[ajtruckle]

Where is the CSS file stored?

[AndiDittrich]

don't edit this file. use an external theme with the content from the theme customizer

[ajtruckle]

Yes, I am using a child theme for my wordpress website. So whatever I do needs to go in there I guess.

[ajtruckle]

don't edit this file. use an external theme with the content from the theme customizer

What I meant was - how do I locate the original CSS file that I need to copy and customize? And where do I put my modified one? Sorry is you are having to teach me to suck eggs. :)

[AndiDittrich]

open the contextual help on the enlighter settings page -> External Themes

the original css file keeps untouched. you're only adding an ADDITIONAL css file which contains the contents of the customizer

[ajtruckle]

Ok, so I got to create a enlighter folder inside my child theme directory. But where do we go from there? Do I use inspecter to examine the existing elements to confirm what name I should give this CSS file? I did not see that in the contextual help.

BTW: "buildin" -> "built in" or "built-in". :)

[AndiDittrich]

1. name it myspecialtheme.css or something like this - it is important that the filename (without the css extension is used as theme identifiert).

2. copy the content of the theme customizer (CSS tab) into this file

3. run search-replace in this file and replace -t-wpcustom with -t-myspecialtheme

4. enable external themes in Enlighter -> Options -> Resources -> External Themes

that should work and a new theme with the name "myspecialtheme" should appear in the theme list

[ajtruckle]

Thanks. I am going to put this on hold. I certainly got a theme showing in the list (thank you for the instructions. But when I tried it it reverted to a very basic content. I was anticipating it would be based on m the current settings (customize theme) that i was using.

I had used the "Stylesheet" tab in the customizer. I figured that was the "CSS" tab you meant. But I had not anticipated having to perform a full theme customization from scratch.

Thanks all the same!

[AndiDittrich]

i've added some kind of documentation about external-themes: https://github.com/EnlighterJS/documentation/blob/master/wordpress/ExternalThemes.md

additionally the master branch contains a minor change (css dependency issue) which may cause overlapping styles

[ajtruckle]

Thanks. My pc is at the shops for repairs. CPU fan error.

Will check in due course.

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Andi Dittrich notifications@github.com Sent: Monday, April 27, 2020 10:09:18 AM To: EnlighterJS/Plugin.ThemeCustomizer Plugin.ThemeCustomizer@noreply.github.com Cc: ajtruckle truckleaj-software@hotmail.co.uk; State change state_change@noreply.github.com Subject: Re: [EnlighterJS/Plugin.ThemeCustomizer] "Line number" colors (#8)

i've added some kind of documentation about external-themes: https://github.com/EnlighterJS/documentation/blob/master/wordpress/ExternalThemes.mdhttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FEnlighterJS%2Fdocumentation%2Fblob%2Fmaster%2Fwordpress%2FExternalThemes.md&data=02%7C01%7C%7Ce26081c941c94d4186c708d7ea8aaae0%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637235753594916108&sdata=7i4%2FRZDh1WBaB%2BwgpotSX1mI0CMX51lnpnlHvfX1vVo%3D&reserved=0

additionally the master branch contains a minor change (css dependency issue) which may cause overlapping styles

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHubhttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FEnlighterJS%2FPlugin.ThemeCustomizer%2Fissues%2F8%23issuecomment-619843147&data=02%7C01%7C%7Ce26081c941c94d4186c708d7ea8aaae0%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637235753594926104&sdata=TxwYdP8byIVp%2F%2F0Drni9MN5qsYqEiKX3ZAIgPPlG7XM%3D&reserved=0, or unsubscribehttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAB45RM6F32JN5UL4BMXY3HTROVDT5ANCNFSM4MQZ42HA&data=02%7C01%7C%7Ce26081c941c94d4186c708d7ea8aaae0%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637235753594936098&sdata=U8npfgSnbIWmqzeWJUqslYHVTsE3JQFDUO3%2B3%2BS1YAg%3D&reserved=0.

[ajtruckle]

I have my PC back. I thought I would try again in my staging area. My mistake was I had used capital letters in the file name and all lowercase in the class names. Since your themes have capital letters I had tried the same.

Making them all lowercase made it work again when I chose my theme. But there was an odd issue with your hover buttons:

[ajtruckle]

Also, what I don''t get is that i can't see the line numbers in the inspector:

Where are they in the code?

[AndiDittrich]

css pseudo (virtual) elements are used for the numbering scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

the button issue should be fixed in the master branch (overlapping css styles)

[ajtruckle]

the button issue should be fixed in the master branch (overlapping css styles)

Thanks. I have updated my EnlighterJS and tried again on my staging site and now the buttons are OK. I think maybe my mistake was that I did not re-create the custom theme from scratch via your plugin tab. So the buttons are all good now.

css pseudo (virtual) elements are used for the numbering scheme

Thanks for the link. I am getting there:

.enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div::before{
    padding: 1px 5px 1px 14px;
    font-size: 1.3em;
    color: black;
    background-color: whitesmoke;
    border-right:thin black solid;
}
.enlighter-t-trucklesoft div.enlighter>div.enlighter-special::before{
    background-color: #2F4F4F;
}

How do I isolate the "hover" ::before pseudo element?

[AndiDittrich]

:hover::before - but which color/behaviour do you want to change ?

[ajtruckle]

Focused Highlighted Row

[AndiDittrich]

.enlighter-t-trucklesoft div.enlighter>div.enlighter-special:hover::before may work

[ajtruckle]

Thanks. I got that to work. It leaves one issue:

.enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div::before{
    padding: 1px 5px 1px 14px;
    font-size: 1.3em;
    color: black;
    background-color: whitesmoke;
    border-right:thin black solid;
}
.enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div::hover::before{
    background-color: #53616f;
}
.enlighter-t-trucklesoft div.enlighter>div.enlighter-special::before{
    background-color: #2F4F4F;
}
.enlighter-t-trucklesoft div.enlighter>div.enlighter-special:hover::before{
    background-color: #53616f;
}
.enlighter-t-trucklesoft.enlighter-hover div.enlighter>div:hover{
    background-color: #53616f;
}

I was trying .enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div::hover::before to set the colour for standard focused rows. Doesn't work.

[AndiDittrich]

it's a difference to use double and single colons

the pseudo elements are only used for the linenumbers. the outer div is used for the line background color

[ajtruckle]

We are talking about the line number background still, I have tried a lot of things, like:

.enlighter-t-trucklesoft div.enlighter>div:hover:before{
    background-color: #53616f;
}

We have these scenarios:

• A normal line of code (we have whitesmoke as the background for the line numbers):

.enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div::before{
    background-color: whitesmoke;
}

• A highlighted line of code (we have #2F4F4F as the background for the line numbers):

.enlighter-t-trucklesoft div.enlighter>div.enlighter-special::before{
    background-color: #2F4F4F;
}

• A focused highlighted line of code (we have #53616f as the background for the line numbers):

.enlighter-t-trucklesoft div.enlighter>div.enlighter-special:hover::before{
    background-color: #53616f;
}

• A focused normal line of code (we want to have #53616f as the background for the line numbers).

it's a difference to use double and single colons

the pseudo elements are only used for the linenumbers. the outer div is used for the line background color

As you can see, I am still referring to the line number element (for a normal line of code that has the mouse over it).

[ajtruckle]

What I need to do is find out how to set the background here:

.enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div::before{
    padding: 1px 5px 1px 14px;
    font-size: 1.3em;
    color: black;
    background-color: whitesmoke;
    border-right:thin black solid;
}

To inherit when the normal row is hovered.

[AndiDittrich]

did you tried to add an !important directive ?

[ajtruckle]

Got it! As you said : verses :::

.enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div::before{
    padding: 1px 5px 1px 14px;
    font-size: 1.3em;
    color: black;
    background-color: whitesmoke;
    border-right:thin black solid;
}
.enlighter-t-trucklesoft.enlighter-linenumbers div.enlighter>div:hover::before{
    background-color: #53616f;
}
.enlighter-t-trucklesoft div.enlighter>div.enlighter-special::before{
    background-color: #2F4F4F;
}
.enlighter-t-trucklesoft div.enlighter>div.enlighter-special:hover::before{
    background-color: #53616f;
}

[AndiDittrich]

great!

btw. the basic css tutorials of w3schools or mdn are very comprehensive