WordPress.org

Ready to get started?Download WordPress

Forums

raindrops
[resolved] format tables in raindrops theme (12 posts)

  1. MrSlartibartfast
    Member
    Posted 2 years ago #

    Hi,

    I have wanted to make a simple table, BUT without border.
    Usually it works by writing:
    <table border="0">

    but also if i write a CSS Rule, a css-class and add it to the table, it doesn't work but still shows me the table with a thin grey border.
    See here: http://www.odyssee-reisen.at/?page_id=153#gebtabelle
    Where can I change the format settings for the table element?

    Sorry for this question, it should be really easy...

    cheers

    http://wordpress.org/extend/themes/raindrops/

  2. Aaron
    Member
    Posted 2 years ago #

    Find the below in your CSS and remove it.

    border: 1px solid rgba(220, 220, 220, 0.5);

    Might show a few times so thats why I didnt say exactly where to go.

  3. MrSlartibartfast
    Member
    Posted 2 years ago #

    In which CSS-file?
    I checked in the style.css of the raindrops-theme and there i couldn't find it.

  4. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    The border is being set by inline CSS (in the table tag in the html -- so trying changing it there.

    Or you could try adding this to the end of your style.css file:

    table tr td {
    border: none !important;
    }

  5. MrSlartibartfast
    Member
    Posted 2 years ago #

    Hi WPyogi,

    Thanks for your suggestion.
    Adding

    table tr td {
    border: none !important;
    }

    to my style.css helps and removes the inner borders from tables and that looks actually nice in this case. Wierd though that the outer border stays...

    I am not completely sure about the syntax, but if i want now a certain table (with the class "withborder") to have a border would it work like this in my css-file?

    tr.withborder{
      border: 1px;
    }

    You say its an inline css - do you have an idea where from? I have checked the css files that i saw in this themes folder and couldn't find the table element being set. hm...

    cheers

  6. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    The inline is now set to zero -- it was 1 before:

    <table border="0" cellspacing="1" cellpadding="15" class="ohnenix">

    To get rid of the outer border, change what you added to this:

    table, table tr td {
    border: none !important;
    }

    There are table styles being set in the head section of the page too -- right above the closing head tag. I'm not sure what's putting those there...

  7. MrSlartibartfast
    Member
    Posted 2 years ago #

    Okay, thanks for that explanation! I think bit by bit I get a better understanding of CSS. I see that i am still having trouble with the syntax and how to define elements.

    The change here:

    <table border="0" cellspacing="1" cellpadding="15" class="ohnenix">

    setting border="0" (or 1), was me doing this manually. I tried to see if the border element has an effect if I am setting it in html, since it didn't work with my css styles.
    (also the class "ohnenix" is one i made where I set it with css (border: none;) which also had no effect...)

  8. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    The tricky thing about CSS is the "cascade" and specificity. This might be helpful"

    http://www.w3schools.com/css/css_howto.asp

    Another really useful tool is Firebug -- and add-on for Firefox which can show you which CSS is taking effect on your page.

  9. nobita
    Member
    Theme Author

    Posted 2 years ago #

    Hi MrSlartibartfast

    RainDrops supports.

    The special method of describing a style rule
    However, this method is applied when this method displays Single post.

    Create a Custom field
    name: css
    value: below

    .ohnenix td{ border:none;}

    and save it.

    It will automatically insert the style rule in your blog header.

    Don't you think that it is convenient?

    I am sorry to be poor at English.

    Thank you.

  10. MrSlartibartfast
    Member
    Posted 2 years ago #

    Hi nobita,

    Thank you! Yes it is convenient and it works fine now. My border problem with tables is hereby solved.

    How can you change, that not every row in the table is written in a different colour?
    They are always like this: one row grey, one row black, one row grey...
    Example: http://www.odyssee-reisen.at/?page_id=153&lang=en#gebtabelle_eng

    Cheers

  11. nobita
    Member
    Theme Author

    Posted 2 years ago #

    Hi MrSlartibartfast

    How can you change, that not every row in the table is written in a different colour?
    They are always like this: one row grey, one row black, one row grey...

    when custom field

    /* reset td automatic style rule */
    .entry-content td{
    background:none;
    color:inherit;
    }
    /* add tr style rule */
    .hentry table tr:nth-child(odd) {
      opacity:1;
      background:black;
      color:#fff;
    }
    .hentry table tr:nth-child(even) {
      opacity: 1;
      background:gray;
      color:#000;
    }

    Always table row style rule

    Open style.css
    and add to the last line below rules .

    .entry-content td{
    background:none!important;
    color:inherit!important;
    }
    .hentry table tr:nth-child(odd) {
      opacity:1!important;
      background:black!important;
      color:#fff!important;
    }
    .hentry table tr:nth-child(even) {
      opacity: 1!important;
      background:gray!important;
      color:#000!important;
    }

    Thank you.

  12. MrSlartibartfast
    Member
    Posted 1 year ago #

    Thank you nobita for the solution!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags