Forums

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

Home › Forums › CSS › WPs CSS settings in a WP site merged with another CMS system (genealogy)

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 5, 2016 at 11:09 am #247519
    xega
    Participant

    Hi!

    I am working on merging a new installation of a WordPress site with a TNG (http://www.tngsitebuilding.com/) site that I have had for a while (http://www.legstadaleit.hafdal.dk).

    I followed the 5 steps described here: http://www.kloosterman.be/info/how-i-made-my-tng-wp-website/

    And the result can be seen here (menu point TNG): http://www.hafdal.dk/test/tng/cemeteries.php

    Now, my problem is that WP seems to somehow block the CSS settings for my TNG site. I have added the CSS code to the custom CSS part in my WP, but it didn’t help.

    If you compare http://www.hafdal.dk/test/tng/cemeteries.php to the css setup I’d like to have which can be seen here: http://www.legstadaleit.hafdal.dk/cemeteries.php you can see that f.ex. the texture background is missing, table width and height is not correct, the font is not right etc.

    I would be really really REALLY greatful if someone could help me with this. I have asked several people but no one has been able to help me so far. And my CSS experience is not very big, so I am completely stuck :-/

    November 6, 2016 at 4:52 am #247524
    Atelierbram
    Participant

    Now, my problem is that WP seems to somehow block the CSS settings for my TNG site. I have added the CSS code to the custom CSS part in my WP, but it didn’t help.

    This CSS is included, the problem is the classnames used in that CSS don’t match up with the tags in your WordPress themes, in other words the aren’t hitting any targets.
    For example for the background of body it is targeting the .publicbody classname which simply isn’t set on the body-tag in your new WP theme. Now in your CSS if you would change .publicbody { to just body { you will see the background-image appear. Same for any other element on the page. Another example, there are styles associated with the main content area .cb-tng-area in your custom stylesheet, also not to be found in your new theme, but if you would rename that one to .inner-wrapper which takes the same place in the layout that would work.
    Do you use (Chrome)Developer Tools or Firebug to “inspect element”?

    November 6, 2016 at 6:50 am #247526
    xega
    Participant

    Thank you, thank you thank you!!!!!

    I have made the changes you mentioned (.publicbody to .body and .cb-tng-area to .inner-wrapper) and I can immediately see the changes! I do use “inspect element” in Chrome, but my CSS knowledge is so limited that I can only figure out the most basic things in it.

    If you have any other pointers, I would be immensely grateful! Thank you again for taking the time to help me, I really appreciate it!!

    November 6, 2016 at 8:21 am #247528
    Atelierbram
    Participant

    You’re welcome. Note this should be body not .body so without the dot, it just targets the <body> tag in the HTML. So when you use “inspect element” and compare the markup of the old setup with the new one, you can make changes to your CSS accordingly, same as you just did with those other two edits. Take your time and take care.

    November 6, 2016 at 9:14 am #247531
    xega
    Participant

    Ah ok, I corrected that (body and not .body).

    I can’t seem to figure out how to see what is the correct classname is and which classname should be changed. Doesn’t look simple so I think I’ll have to read up on it.

    Thank you again, you really helped me move forward :-)

    November 6, 2016 at 12:17 pm #247546
    Atelierbram
    Participant

    Going back and forth with reading up on CSS and than trying to accomplish something in code (making hands dirty) will make one learn fast.

    Learning more about using Chrome Devtools there are also quite a few good video tutorials around on YouTube and elsewhere, which is a very suitable medium for this kind of thing, keeping things visual and therefor insightful.

    Another piece of advice would be to include your mytngstyle.css after the link to your main stylesheet style.css, in the head because like it is now your main stylesheet is overriding the changes you make in mytngstyle.css. Alternatively forget about mytngstyle.css and just edit the changes into style.css.

    Maybe you don’t need this but looking at the source code of your new testpage I also noticed there are two times a different <head><!--stuff --></head> section.

    November 6, 2016 at 1:33 pm #247556
    xega
    Participant

    Hello again :-)

    Would loading the mytngstyle.css before the style.css make sure that mytngstyle.css is read first and takes precidence? Because if so, that would be my ultimate solution, right?
    I’m managing to make very small changes in very small steps…feels like this is going to take forever :-)

    November 6, 2016 at 1:35 pm #247557
    xega
    Participant

    Sorry, my brain is shutting down. Ignore my previous post. Doing that wouldn’t change my issue with the incorrect classnames….sigh.

    November 6, 2016 at 1:48 pm #247561
    Atelierbram
    Participant

    No it’s exactly the opposite, what is read last takes precedence! Like I wrote, loading mytngstyle.css after style.css would make, for example, the property/value-pair for background within the declaration block of body { background: /* stuff */ ;} override the one in style.css. So anything in your CSS, even if it’s in the same stylesheet and has the same specificity which comes after the same css-selector will override that one. Than there is also the cascade and inheritance which will come into play sooner or later as well. So trying to wrap your mind around specificity, the cascade an inheritance will help you much in understanding how CSS works.

    Take it easy, take your time to let it all sink in ;) it’s easy to forget there’s really a lot to all this after doing this thing for awhile.

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