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

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.
enter image description here

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

enter image description here

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

edited Jan 1 at 11:46

asked Dec 25 '18 at 18:01

PRATAP

915

migrated from superuser.com Dec 25 '18 at 20:36

This question came from our site for computer enthusiasts and power users.

2

Try first-child instead of first-line

– i_th
Dec 29 '18 at 5:11

Or clock-display :inset 0px 40px 0 0 green

– i_th
Dec 29 '18 at 5:13

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 5:25

sorry. correction to above comment. first-child over wrote blue and made both the lines to green.

– PRATAP
Dec 29 '18 at 5:59

1

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 4:39

|
show 7 more comments

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.
enter image description here

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

enter image description here

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

edited Jan 1 at 11:46

asked Dec 25 '18 at 18:01

PRATAP

915

migrated from superuser.com Dec 25 '18 at 20:36

This question came from our site for computer enthusiasts and power users.

2

Try first-child instead of first-line

– i_th
Dec 29 '18 at 5:11

Or clock-display :inset 0px 40px 0 0 green

– i_th
Dec 29 '18 at 5:13

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 5:25

sorry. correction to above comment. first-child over wrote blue and made both the lines to green.

– PRATAP
Dec 29 '18 at 5:59

1

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 4:39

|
show 7 more comments

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.
enter image description here

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

enter image description here

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

edited Jan 1 at 11:46

asked Dec 25 '18 at 18:01

PRATAP

915

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.
enter image description here

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

enter image description here

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

javascript css ubuntu

edited Jan 1 at 11:46

asked Dec 25 '18 at 18:01

PRATAP

915

edited Jan 1 at 11:46

asked Dec 25 '18 at 18:01

PRATAP

915

edited Jan 1 at 11:46

asked Dec 25 '18 at 18:01

PRATAP

915

asked Dec 25 '18 at 18:01

PRATAP

915

asked Dec 25 '18 at 18:01

PRATAP

915

migrated from superuser.com Dec 25 '18 at 20:36

This question came from our site for computer enthusiasts and power users.

migrated from superuser.com Dec 25 '18 at 20:36

This question came from our site for computer enthusiasts and power users.

2

Try first-child instead of first-line

– i_th
Dec 29 '18 at 5:11

Or clock-display :inset 0px 40px 0 0 green

– i_th
Dec 29 '18 at 5:13

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 5:25

sorry. correction to above comment. first-child over wrote blue and made both the lines to green.

– PRATAP
Dec 29 '18 at 5:59

1

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 4:39

|
show 7 more comments

2

Try first-child instead of first-line

– i_th
Dec 29 '18 at 5:11

Or clock-display :inset 0px 40px 0 0 green

– i_th
Dec 29 '18 at 5:13

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 5:25

sorry. correction to above comment. first-child over wrote blue and made both the lines to green.

– PRATAP
Dec 29 '18 at 5:59

1

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 4:39

Try first-child instead of first-line

– i_th
Dec 29 '18 at 5:11

Or clock-display :inset 0px 40px 0 0 green

– i_th
Dec 29 '18 at 5:13

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 5:25

sorry. correction to above comment. first-child over wrote blue and made both the lines to green.

– PRATAP
Dec 29 '18 at 5:59

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 4:39

|
show 7 more comments

2 Answers
2

active

oldest

votes

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

646

Check this answer too. You may need to change theme css styles not the clock extension. askubuntu.com/a/980761

– Deniz
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 1 at 1: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
Jan 1 at 8: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 1 at 9: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
Jan 1 at 10:00

|
show 7 more comments

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 1 at 11:41

answered Dec 31 '18 at 21:10

i_th

1,068718

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 1 at 1:52

The change should be in clock-display not in the first-line.

– i_th
Jan 1 at 5:01

i tried exactly what you mentioned in answer.. but the changes are applied to both lines..

– PRATAP
Jan 1 at 5:19

Could you please show a print screen of the result.

– i_th
Jan 1 at 8:11

here is the link i.stack.imgur.com/AmF8j.gif

– PRATAP
Jan 1 at 9:17

|
show 4 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53925476%2fcss-file-first-line-not-possible-how-to-achieve-this-ubuntu-18-04%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

646

Check this answer too. You may need to change theme css styles not the clock extension. askubuntu.com/a/980761

– Deniz
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 1 at 1: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
Jan 1 at 8: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 1 at 9: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
Jan 1 at 10:00

|
show 7 more comments

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

646

Check this answer too. You may need to change theme css styles not the clock extension. askubuntu.com/a/980761

– Deniz
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 1 at 1: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
Jan 1 at 8: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 1 at 9: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
Jan 1 at 10:00

|
show 7 more comments

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

646

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

646

answered Dec 31 '18 at 20:01

Deniz

646

answered Dec 31 '18 at 20:01

Deniz

646

answered Dec 31 '18 at 20:01

Deniz

646

Check this answer too. You may need to change theme css styles not the clock extension. askubuntu.com/a/980761

– Deniz
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 1 at 1: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
Jan 1 at 8: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 1 at 9: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
Jan 1 at 10:00

|
show 7 more comments

Check this answer too. You may need to change theme css styles not the clock extension. askubuntu.com/a/980761

– Deniz
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 1 at 1: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
Jan 1 at 8: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 1 at 9: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
Jan 1 at 10:00

Check this answer too. You may need to change theme css styles not the clock extension. askubuntu.com/a/980761

– Deniz
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 1 at 1: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
Jan 1 at 8: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 1 at 9: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
Jan 1 at 10:00

|
show 7 more comments

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 1 at 11:41

answered Dec 31 '18 at 21:10

i_th

1,068718

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 1 at 1:52

The change should be in clock-display not in the first-line.

– i_th
Jan 1 at 5:01

i tried exactly what you mentioned in answer.. but the changes are applied to both lines..

– PRATAP
Jan 1 at 5:19

Could you please show a print screen of the result.

– i_th
Jan 1 at 8:11

here is the link i.stack.imgur.com/AmF8j.gif

– PRATAP
Jan 1 at 9:17

|
show 4 more comments

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 1 at 11:41

answered Dec 31 '18 at 21:10

i_th

1,068718

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 1 at 1:52

The change should be in clock-display not in the first-line.

– i_th
Jan 1 at 5:01

i tried exactly what you mentioned in answer.. but the changes are applied to both lines..

– PRATAP
Jan 1 at 5:19

Could you please show a print screen of the result.

– i_th
Jan 1 at 8:11

here is the link i.stack.imgur.com/AmF8j.gif

– PRATAP
Jan 1 at 9:17

|
show 4 more comments

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 1 at 11:41

answered Dec 31 '18 at 21:10

i_th

1,068718

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>

#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>

#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>

.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>

.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 1 at 11:41

answered Dec 31 '18 at 21:10

i_th

1,068718

edited Jan 1 at 11:41

answered Dec 31 '18 at 21:10

i_th

1,068718

answered Dec 31 '18 at 21:10

i_th

1,068718

answered Dec 31 '18 at 21:10

i_th

1,068718

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 1 at 1:52

The change should be in clock-display not in the first-line.

– i_th
Jan 1 at 5:01

i tried exactly what you mentioned in answer.. but the changes are applied to both lines..

– PRATAP
Jan 1 at 5:19

Could you please show a print screen of the result.

– i_th
Jan 1 at 8:11

here is the link i.stack.imgur.com/AmF8j.gif

– PRATAP
Jan 1 at 9:17

|
show 4 more comments

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 1 at 1:52

The change should be in clock-display not in the first-line.

– i_th
Jan 1 at 5:01

i tried exactly what you mentioned in answer.. but the changes are applied to both lines..

– PRATAP
Jan 1 at 5:19

Could you please show a print screen of the result.

– i_th
Jan 1 at 8:11

here is the link i.stack.imgur.com/AmF8j.gif

– PRATAP
Jan 1 at 9:17

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 1 at 1:52

The change should be in clock-display not in the first-line.

– i_th
Jan 1 at 5:01

i tried exactly what you mentioned in answer.. but the changes are applied to both lines..

– PRATAP
Jan 1 at 5:19

Could you please show a print screen of the result.

– i_th
Jan 1 at 8:11

here is the link i.stack.imgur.com/AmF8j.gif

– PRATAP
Jan 1 at 9:17

|
show 4 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Gfrktyl