MyBB Community Forums

Hello everyone,

Could anyone help, how could I achieve the shaped thead seen in the picture. 

Also how can I colour individual theads?

---

Any help at all would be great I’m really stuck.

You could trying using CSS3 transform.
This is an example I used for the same effect but on buttons.

transform: skew(-18deg);

For individual thead styling use this tutorial.
https://community.mybb.com/thread-231646.html

Thanks @iAndrew , nice way to create the shear

@OP

.thead {
    background-image: url(https://i.imgur.com/uKnZnXH.png);
    background-repeat: no-repeat;
}

This code works for me. For perfection, you will have to work on the image and make one of your own.

---

It will appear something like this



I made these images, might help you create your own

(2021-03-14, 07:50 PM)meetdilip Wrote: [ -> ]Thanks @iAndrew , nice way to create the shear

@OP

.thead {
    background-image: url(https://i.imgur.com/uKnZnXH.png);
    background-repeat: no-repeat;
}

This code works for me. For perfection, you will have to work on the image and make one of your own.

---

It will appear something like this



I made these images, might help you create your own

I just replaced the thead css with this and nothing changed, lol I must be doing something wrong

---

(2021-03-14, 07:14 PM)iAndrew Wrote: [ -> ]You could trying using CSS3 transform.
This is an example I used for the same effect but on buttons.

transform: skew(-18deg);

For individual thead styling use this tutorial.
https://community.mybb.com/thread-231646.html

Sorry, where would I put the code?

---

(2021-03-14, 07:14 PM)iAndrew Wrote: [ -> ]You could trying using CSS3 transform.
This is an example I used for the same effect but on buttons.

transform: skew(-18deg);

For individual thead styling use this tutorial.
https://community.mybb.com/thread-231646.html

How would I skew just on one side?

(2021-03-14, 08:10 PM)Dizzygaming Wrote: [ -> ]How would I skew just on one side?

My code was just an example of how you could do it. You would need to further edit the templates.

Here is an easier way for you.

    background: #0066a2 url(images/right-side-image.jpg) top right no-repeat;

[attachment=43940]

(2021-03-15, 01:49 PM)iAndrew Wrote: [ -> ]

(2021-03-14, 08:10 PM)Dizzygaming Wrote: [ -> ]How would I skew just on one side?

My code was just an example of how you could do it. You would need to further edit the templates.

Here is an easier way for you.

    background: #0066a2 url(images/right-side-image.jpg) top right no-repeat;

Thank you for your help, I'd have to look into this further to achieve what I want.