Way to add html code, styles in wordpress page

CMS & WordPress
1

What is the Way to add dis https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_pricing_table html code, styles in wordpress page http://share-ask.com/advertising-blogs/

2

Personally I would look for a plugin. I used tablepress; although there does not seem to be a way to leave a gap between the columns. You could get around that by having three tables.

3

Hey
Have you already added that code.
I have checked into your website its showing you have already listed plans over there.

if not added let me know?

Thanks

4

ya its fixed now ty

5

It is always polite to post what you did so others with the same problem can see how to do it.

3 Likes
6

Not an issue, I was just thinking about the thread is closed or still waiting for answer.
Anyway, Here is answer to your Question:
Divide your Code into two parts.

  1. Css
  2. Html

Css

* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

Put above code into your already working Css file.
For example: style.css Make a proper comment into the file.

And for the tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Check into headed.php file if its already added. If not in file then put into header file under <head> tag

Html
It depends on which page and how many pages you want to show it up.

<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>

<div class="columns">
  <ul class="price">
    <li class="header">Basic</li>
    <li class="grey">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#4CAF50">Pro</li>
    <li class="grey">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Premium</li>
    <li class="grey">$ 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>

Put into the template file for the page you are using.

Still any questions in mind? Happy to reply…!!

1 Like
7

how can i include dis css in my style.css or external style sheet in my parent theme as my dis child theme gives error like unable to save when i customise in child theme hitmagchild.zip (1.2 KB)

8

Why are you trying to add this code when you’ve already solved the issue?

9

bcoz in additional css lot of code is dere so i need external style sheet

10

functions.php (410 Bytes)

Replace your function.php file with i have attached.

1 Like
11

it doesnt work when i modify function.php in child theme

& it gives below error on publishing

Looks like something’s gone wrong. Wait a couple seconds, and then try again.

PNG
PNG1600Ă—900 264 KB

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.