Twenty Twelve Child Theme modification

  • PickleEater

    (@pickleeater)


    8 years, 5 months ago

    My client’s website is based on a child theme of the Twenty Twelve theme.

    On the home page, the client wishes to have a video appear “full screen” (i.e. behind the main content and footer and expanding to either side.

    The URL is not the live site but a development version which I’ve hosted in a subdomain.

    The YouTube video has been placed on the home page (the language is Azeri). The same video also plays automatically (using the free version of my.YTPlayer) but is largely covered by the header, body and footer backgrounds.

    I’ve spent a couple of days searching the forum for potential methods of enabling the backgrounds of these page elements to be transparent (the page ID is 78) but nothing has worked.

    Any suggestions that would make this work would be much appreciated.

    Also, is it possible to add a white “shadow” behind the text so that it doesn’t get lost in the video?

    Thanks in anticipation

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • HudsonValleyWebDesign

    (@jaycbrf)

    8 years, 5 months ago

    URL not found on server –

    Basic CSS to add opacity to background.

    .className {background-color: rgba: 255,255,255, 0.5;}

    .classname is the class of the element you want to change opacity of.
    rgba: is the rgb value of the color, 255,255,255 is white
    0.5 is the percent opacity of the alpha channel

    https://www.w3schools.com/css/css_image_transparency.asp

    text shadow:
    https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

    Please use Google for basic coding questions as they are not WordPress issues.

    Thread Starter PickleEater

    (@pickleeater)

    8 years, 5 months ago

    Thank you for your helpful response which has guided me to what I believe to be a generally universal solution.

    Apologies – the correct URL is http://mbwp.org.uk/ml

    It’s only basic when you already know the answer and I hadn’t found the answer on Google, w3Schools or ww.wp.xz.cn in two days of searching and trying out a wide range of possible solutions – none of which appeared to work for me.

    The solution that I have finally applied involved pasting the following code into the Additional CSS section of the child theme (under Customise or Appearance|Edit CSS:

    #page {background-color: transparent;}
    #page {text-shadow: 1px 1px #fff;}

    In WordPress themes The default background colour appears to be white.

    The above solution firstly makes the background of every page of the site transparent. This is not a problem when there is nothing else “behind” the page elements that you want to show through.

    My client wants a video to show through on the home page only and the first line of CSS facilitates this by making the page background-color transparent (on every page). Being that the video is only on the Home page then no other page is visibly affected.

    Of course, there is also text on the Home page which the client wants to be overlayed on top of the video and the page content to scroll whilst the video continues to play but remains static. This is effected by the second line of CSS.

    Setting the page text shadow to #fff (white) with an offset of 1px right and 1px down makes the black text visible over the video and, again, this has no visible impact on any other page.

    Finally I made the page text bold just to make it stand out a little more. I’ve left the footer text in its original form.

    For those less experienced, it is vital to make such changes to a child theme, as if a parent (i.e. downloadable theme) is used then the changes will be lost if that original theme is updated (which is a frequent occurrence).

    Of all the possible solutions to this query I believe that this solution is about as simple and elegant as it gets other than explicitly to include the page-ID.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Twenty Twelve Child Theme modification’ is closed to new replies.