Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 18, 2021 at 3:38 pm #1301014
    Steve

    Hi there,

    I’m trying to control a few elements on one page, without changing the entire site.
    Is there a cheat-sheet for this kind of request, or a list of QUICK CSS commands to work with as a starting point?

    Initially, I’m looking to change the border colour of one page only, and possibly a few other elements.

    Your help much appreciated!

    Thank you
    Steve :-)

    May 18, 2021 at 10:58 pm #1301083
    Steve

    Hi – I’ve added a link to the page in question in private. Any chance of a response?

    Thank you
    Steve

    May 19, 2021 at 1:19 pm #1301192
    Rikard

    Hi Steve,

    It is possible to target single pages with CSS, the page you linked to has this class, which is unique for that page:

    .page-id-22914

    I’m not sure which border you are trying to target though?

    Best regards,
    Rikard

    May 19, 2021 at 2:21 pm #1301207
    Steve

    Hi Rikard,

    Yes thank you – I got as far as the page ID, but the element I want to focus mainly on is the border, which has been set in the MAIN CONTENT of Enfold CSS as a site-wide pink. The colour I would like to achieve for this page is #ffffff – white.

    (In particular for the 3rd party widget form, which inherits the border colour from Enfold)

    This is as far – unsuccessfully- as I got:

    .page-id-22914 {
    border color: none;
}

    Thank you
    Steve

    May 21, 2021 at 5:34 am #1301513
    Rikard

    Hi Steve,

    Thanks for the update. Please try this CSS instead:

    .page-id-22914 .flex_column, .page-id-22914 .tw-grid__col--50 {
    border-color: #fff !important;
}

    Best regards,
    Rikard

    May 21, 2021 at 4:34 pm #1301672
    Steve

    Hi Rikard. That works on the border of the container, but not on the 3rd party widget, but it does work on the 3rd party widget if I change the colour in the MAIN CONTENT.

    Bizarre!!!

    I know it’s odd, but is there a tweak that might work? Apologies, but the 3rd party has little editing option (bad design!)

    Sorry for the complexity 😔

    May 21, 2021 at 4:36 pm #1301674
    Steve

    Addendum: but of course, when I change the MAIN CONTENT, the whole site changes! Ahh! 😖

    May 23, 2021 at 7:26 pm #1301855
    Mike

    Hi,
    Thank you for your patience, I believe you are referring to these borders:
    2021-05-23_132043.jpg
    for only these borders on this one page please try this css:

    #top.page-id-22914 #tonic-ticket-widget div {
	border-color: #fff;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 24, 2021 at 10:21 am #1301945
    Steve

    Aha.. you guys sort it every time 😊
    Thank you so much!!!

    Case closed
    Steve

    May 24, 2021 at 10:39 am #1301947
    Steve

    Ooh! PS… Is there a simple CSS to lower the font size in those same boxes?

    (I noticed on mouseover that the box is still clipped by the font)

    Steve😊

    May 25, 2021 at 5:13 am #1302128
    Rikard

    Hi Steve,

    Thanks for the update. I’m not sure which text you are referring to, is it the events information on hover which you want to make smaller?

    Best regards,
    Rikard

    May 25, 2021 at 8:14 am #1302159
    Steve

    Hi Rikard,

    Yes it is. It would probably be easier to make the box area that holds the text more flexible, but I don’t think we can do that.

    They have tried to put a lot of text in a small area!

    Thank you
    Steve

    May 25, 2021 at 11:55 am #1302205
    Mike

    Hi,
    On my desktop the text is 16px, and the actual css font-size is 1em which will show different px sizes based on screen size, anyways to change the font-size to 14px try this css:

    #top.page-id-22914 #tonic-ticket-widget.tw-widget h4.tw-text--flush,
#top.page-id-22914 #tonic-ticket-widget.tw-widget p.tw-text--flush,
#top.page-id-22914 #tonic-ticket-widget.tw-widget p span {
	font-size: 14px;
}

    but to change the font-size only on hover try this css instead:

    #top.page-id-22914 #tonic-ticket-widget.tw-widget .tw-item:hover h4.tw-text--flush,
#top.page-id-22914 #tonic-ticket-widget.tw-widget .tw-item:hover p.tw-text--flush,
#top.page-id-22914 #tonic-ticket-widget.tw-widget .tw-item:hover p span {
	font-size: 14px;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 25, 2021 at 1:34 pm #1302221
    Steve

    Mike – that works! Thank you. I will leave it there now, as that’s the size that fits all screens.
    (in fact, I lowered the font to 12 – I can always up it slowly if there’s complaints)

    Thanks again for making this painless.

    Much appreciated.
    Steve :-)

    May 26, 2021 at 11:57 am #1302396
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘CSS control of elements on a single page’ is closed to new replies.