Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to display(duplicate) a figure/text on multiple pages using CSS

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #264932
    Newbie_HTML
    Participant

    Hi,

    I have a figure of how much we have done within a sector i.e. £200,000, this is displayed over an image for that sector.

    I need this figure to automatically change once I’ve updated it somewhere (either backend or inline css) and everywhere that figure is displayed it will update to the new figure.

    Basically to reduce the amount of time I have to manually update the figure everywhere it is referenced and reducing the likelihood of error with numbers not being the same.

    I hope this makes sense and I really hope this can be done easily?

    #264938
    Beverleyh
    Participant

    You could do it with Javascript in an external file (modify innerHTML or textContent) or, if your web page can run PHP, try a PHP include()

    #264941
    Newbie_HTML
    Participant

    Thank you BeverleyH,

    You are a diamond!

    Do you have any examples of how it’s done? I’m running a wordpress site with a custom theme.

    #264951
    Beverleyh
    Participant

    Hit up Google for examples of what’s highlighted;

    JS innerHTML https://www.w3schools.com/jsref/prop_html_innerhtml.asp

    JS textContent https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

    PHP include http://www.tizag.com/phpT/include.php

    Unfortunately I don’t use WordPress so I couldn’t tell you how to go about inserting custom JS, or PHP files, or if you need a custom plugin for inserting PHP like you do in Joomla. I imagine the JS method will be easier to implement; there’s probably a place in the template (via a template editor or directly in the template files) where you can insert your own scripts, but bear in mind the output (the £200,000 text) will only be seen in the browser. It could also fail if JavaScript fails to load for some reason. You might also experience problems with caching if you decide to do it from an external .js file; where changes to the .js files don’t automatically load without a hard-refresh, which your users won’t know to do. You can overcome this with various cache-busting techniques though (something to research via Google). I’d see if you can do it with an inline script first. Better still, go the PHP route instead because the output will be knitted into the source code of the web page as it leaves the server, so it wouldn’t be subject to the same limitations that JS can be.

    #264967
    Beverleyh
    Participant

    Totally forgot about pseudo elements in CSS https://css-tricks.com/almanac/selectors/a/after-and-before/

    Try it in an inline style tag in the main header template file, or maybe you can edit the head section via a template editor via the admin panel. If it were to go in an external stylesheet, it will likely fall foul of the previously mentioned caching problem (like the .js file). Again, the text won’t exist in the web page’s document body (its CSS afterall), so it isn’t real content that a search engine can read, but if you’re happy to go with a visual only workaround, give it a whirl.

    #265127
    Newbie_HTML
    Participant

    BeverleyH, thank you soo much, I’ve explored the javascript and it looks quite technical for a newb like me.
    The pseudo element looks the best option on an initial test.

    The WordPress theme has a backend section for custom CSS and Custom JS ideally all of the Sectors that the company works in i.e. Offices, Residential etc… will have a sector total… £200,000 this figure will change quarterly and will be displayed in a few places on the new website, so to keep consistency of figures having all the figures in one place that can be quickly edited it a huge time saver.

    I think the CSS is the best route as i’m not worried about SEO for the figures.

    Thank you again, I really appreciate it! :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.