Not Solved Shaped thead?
#1
Not Solved
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.


Attached Files Thumbnail(s)
   
Reply
#2
Not Solved
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
[Image: sig2.jpg]
Reply
#3
Not Solved
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

[Image: attachment.php?aid=43938]

I made these images, might help you create your own



[Image: d1RTUUc.png]

[Image: oYhU5ou.png]

[Image: EuALhXF.png]

[Image: HhOVGdp.png]


Attached Files Thumbnail(s)
   
Reply
#4
Not Solved
(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

[Image: attachment.php?aid=43938]

I made these images, might help you create your own



[Image: d1RTUUc.png]

[Image: oYhU5ou.png]

[Image: EuALhXF.png]

[Image: HhOVGdp.png]

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?
Reply
#5
Not Solved
(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;


   
[Image: sig2.jpg]
Reply
#6
Not Solved
(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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)