.css file, ::first-line not possible. how to achieve this? Ubuntu 18.04

Question

Ubuntu 18.04

i am customizing the panel, this is the content in .css file
i have added ::first-line part to cusomize first line as shown in the below image. but it is not applied after reboot.

Content of .css file:

#panel .clock-display {
    color: blue; }

#panel .clock-display::first-line {
    color: green; }

Content of .js file:

var DateMenuButton = new Lang.Class({
    Name: 'DateMenuButton',
    Extends: PanelMenu.Button,

    _init() {
        let item;
        let hbox;
        let vbox;

        let menuAlignment = 0.5;
        if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
            menuAlignment = 1.0 - menuAlignment;
        this.parent(menuAlignment);

        this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
        this._indicator = new MessagesIndicator();

        let box = new St.BoxLayout();
        box.add_actor(new IndicatorPad(this._indicator.actor));
        box.add_actor(this._clockDisplay);
        box.add_actor(this._indicator.actor);

        this.actor.label_actor = this._clockDisplay;
        this.actor.add_actor(box);
        this.actor.add_style_class_name ('clock-display');

in this last line this.actor.add_style_calss_name ('clock-display'); i guess i have to specify its pseudo_calss or something but i dont have any idea.

in the below image if you see the day with time stamp, it is the default behavior when Ubuntu is freshly installed.

by using Clock Override Extension, it is possible to make our own text.. like in this image..

here is a clue, this Clock Override Extension have special feature to make a next line by adding %n in its settings https://developer.gnome.org/glib/stable/glib-GDateTime.html#g-date-time-format

Clock Override Extension Details: https://extensions.gnome.org/extension/1206/clock-override/

Question: i am looking to configure both lines independently in .css file to choose the colors, heights, weights, shadows, borders etc.

is it achievable?

all related files here: https://wetransfer.com/downloads/dd97a53972b17f746225efdfa345a03220181231063516/111ced

thanks for your comments.. i tried the first one.. but didt change.. second one.. i messed up whether to make it like `#panel .clock-display { inset opx 40px 0 0 green; }` Also dont we need to edit anything in. js file to tell this is pseudo element related.. as i read in some document that to configure first line.. pseudo related. but my observation is that native .js file is missing it.. anyways i am zero knowledge in js.. please guide me.. — PRATAP, Dec 29 '18 at 05:25
sorry. correction to above comment. first-child over wrote blue and made both the lines to green. — PRATAP, Dec 29 '18 at 05:59
try this : `#panel .clock-display { color: blue; margin-left: 40px; margin-right: 40px; inset opx 40px 0 0 green; }` — I_Al-thamary, Dec 29 '18 at 06:07
Read this it may help you:https://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color — I_Al-thamary, Dec 29 '18 at 06:14
thanks for above link.. i need to edit the question with few more details.. i guess it is something to do with `.js` files to tell `.css` file to accept `pseudo element`.. will update question with further more details. — PRATAP, Dec 29 '18 at 11:10
You're headed the wrong direction. You cannot specify pseudo-elements in JS. You only specify the class in JS. You must define the pseudo-element in CSS. The problem in this case, I suspect, is that `#panel .clock-display` is not a block element. `::first-line` only works in block elements. Is it possible to share the HTML that the JS is generating? — aridlehoover, Dec 31 '18 at 04:39
thanks for the comment @aridlehoover..i will check about HTML and share you.. but i am just a normal person who is not into software..i will have to google about HTML, JS and revert back to you. Thank You. — PRATAP, Dec 31 '18 at 04:46
@aridlehoover here is the link for `.css` & `.js` files but i did not see any impact of HTML that generates this JS. when i installed Ubuntu 18.04.. these are the files `/usr/share/gnome-shell/theme/ubuntu.css` and `/usr/lib/gnome-shell/libgnome-shell.so` from the `.so` file `/org/gnome/shell/ui/dateMenu.js` — PRATAP, Dec 31 '18 at 06:39
@aridlehoover https://wetransfer.com/downloads/dd97a53972b17f746225efdfa345a03220181231063516/111ced — PRATAP, Dec 31 '18 at 06:42

score 0 · Answer 1 · answered Dec 31 '18 at 20:01

0

Can you try to add a style class to a specific object?

For example: #line 475

this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER, style_class: 'clock-label' });

CSS:

.clock-label { color: #101010; font-weight: bold; background: #fff; }

answered Dec 31 '18 at 20:01

Deniz Öztürk

149
9

Check this answer too. You may need to change theme css styles not the clock extension. https://askubuntu.com/a/980761 – Deniz Öztürk Dec 31 '18 at 21:07
Hi, thanks for your answer..i have made line#475 as you mentioned in your answer and then made changes to CSS.. .clock-label worked but still it is applied to both the lines..i strongly believe clock override extension is involved. as to override the clock text.. the input it takes is in a single line only..but when `%n` is added, it makes the text to appear in next line. Example: text to display instead of the clock = `%H:%M%n%a, %d. %h` – PRATAP Jan 01 '19 at 01:58
Okay. You can try this: #panel .clock-label:first-child It could have worked but we do not know the css structure well. Due to this try another way: .clock-label:first-child { color: #101010; font-weight: bold; background: #fff; } Hope it works. – Deniz Öztürk Jan 01 '19 at 08:04
i tried it.. but when first-child is given, it is still taking `clock-label { color` for both the lines.. and if i delete the `clock-label { color` line and if i keep the first-child only..it is taking the default white color and ignoring first-child. – PRATAP Jan 01 '19 at 09:33
Try to add !important at the end your new style. I know that it is not efficient but I'm trying to figure it out. Example: color: #101010 !important; – Deniz Öztürk Jan 01 '19 at 10:00
Hah okay! See the hover style: #Line738 or if you have added some lines it should be somewhere close to 738th line #panel.solid .panel-button:hover, #panel.solid .panel-button:active, #panel.solid .panel-button:overview, #panel.solid .panel-button:focus, #panel.solid .panel-button:checked { color: white; } – Deniz Öztürk Jan 01 '19 at 10:13
i noticed it before.. if you observe nothing is specified in original CSS file about this `clock-display` when we add `clock-display` in CSS file.. it is indipendent from line 738..fine..what am i looking is when we made it away from line 738...need to specify `::firsr-line` – PRATAP Jan 01 '19 at 10:19
i later specified four colors to `.clock-display` when hover.. when solid.. when solid and hover.. etc.. all the four colors are applied to both the lines.. – PRATAP Jan 01 '19 at 10:22
I did not see .solid class in the js file. There is not anything related that class. I think you change it in this block: #panel .clock-display {} Due to this we should try add a new block like this: #panel .clock-display:hover {} – Deniz Öztürk Jan 01 '19 at 10:26
i didt change anything in JS. in the CSS file.. i specified `#panel.solid .clock-display:hover { color: magenta; }` and yes its magenta when the panel is solid and i hover on it.. like this other 3 colors also.. but they are applied to both the lines... when i specify `#panel.solid .clock-display::first-line { color: green; }` it is not possible. – PRATAP Jan 01 '19 at 10:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186004/discussion-between-deniz-and-pratap). – Deniz Öztürk Jan 01 '19 at 10:40

I_Al-thamary · Answer 2 · 2019-01-01T11:41:27.637

0

Try it. It is working unless your text is considered as one line.

#panel .clock-display {
    color: blue;
    margin-left: 40px;
    margin-right: 40px;
}

#panel .clock-display::first-line {
height: 40px;
  width: device-width;
   background:  blue;}

.barfont {

  height: 30px;
  width: device-width;
  color:  blue;
font-size:15px;
font-weight: bold;
line-height:0px;



}
.barbackground {
margin: 0;
padding: 0;
  height: 30px;
  width: device-width;
background-color: green;
 border-top-style: solid;
  border-top-color: green;
line-height:0px;
}

<html>
<body background="https://i.stack.imgur.com/80hPG.png" >
<div class="barbackground"> 
<p class="barfont">data  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp day  first link </p></div>
</body>
</html>

Changing the first line.

.clock-display {
    color: blue;
  margin-left: 40px;
  text-indent: 40px;
}
::first-line {
  color: green;



  /* WARNING: DO NOT USE THESE */
  /* Many properties are invalid in ::first-line pseudo-elements */
  margin-left: 20px;
  text-indent: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body  >


         <pre class="clock-display">
    121
    data and time</pre> 
   



</body>
</html>

edited Jan 01 '19 at 11:41

answered Dec 31 '18 at 21:10

I_Al-thamary

3,385
2
24
37

Hi, thanks for your answer..i tried exactly what you mentioned in the answer. but it is not changing the first line and second line..any changes made are applied to the both the lines.. – PRATAP Jan 01 '19 at 01:52
The change should be in `clock-display` not in the `first-line`. – I_Al-thamary Jan 01 '19 at 05:01
i tried exactly what you mentioned in answer.. but the changes are applied to both lines.. – PRATAP Jan 01 '19 at 05:19
Could you please show a print screen of the result. – I_Al-thamary Jan 01 '19 at 08:11
The word a `Activities` is not in the same class `clock-display`. So, find the class and change the color or you can use `[word="Activities"]' in CSS. – I_Al-thamary Jan 01 '19 at 09:46
sorry i didt catch your point.. you mean nothing to do with JS file.. shall i open CSS file and which field shall i change.. can you explain little deep like line num or content.. – PRATAP Jan 01 '19 at 09:53
`Activities` you mean in .gif top left?? – PRATAP Jan 01 '19 at 09:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186003/discussion-between-i-th-and-pratap). – I_Al-thamary Jan 01 '19 at 09:56

.css file, ::first-line not possible. how to achieve this? Ubuntu 18.04

2 Answers2