new theme idea

Post Reply
User avatar
turboblack
Posts: 198
Joined: Fri Sep 19, 2014 1:53 pm

new theme idea

Post by turboblack »

hi.

have an idea for a new theme...

i have sutch code:

Code: Select all

background: #000;
	background-image: url(left_top.png), url(left_bottom1.png), url(top_repeat_x.png), url(bottom_repeat_x.png), url(left_top.png), url(right_top.png), url(right_bottom.png), url(white_paper_right_repeat_y.png), url(center_y_repeat1.png);
background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y;
background-position: left top, right bottom, left top, left bottom, left top, right top, left bottom,  right top, left top;
and a files for:
images.zip
images for ^-)
(31.37 KiB) Downloaded 582 times
and I have such a question: I posted the pictures so that they add up a whole page in general. if they are placed in the css folder and the code is set as the background for the page content - it will be almost perfect, but I need to adjust the markup, the contents of the letters go beyond the boundaries of my page, how to fix it?
example.png
example.png (11.94 KiB) Viewed 8993 times
http://old.net.eu.org/ Get ready to hamsterization! 8-) code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: new theme idea

Post by wiz »

You will need an additional div (as seen in the screenshot), which will be 775px wide (marked in gray area).
The 775px will hold the text onto the list and will not go beyond the boundaries along the page Hope this helps. :)

You could also make this with percentages or Bootstrap to make it responsive and work properly on mobile devices.
Attachments
div-775px.jpg
div-775px.jpg (16.9 KiB) Viewed 8990 times
User avatar
turboblack
Posts: 198
Joined: Fri Sep 19, 2014 1:53 pm

Re: new theme idea

Post by turboblack »

wiz wrote: Wed Sep 27, 2017 11:18 am You will need an additional div (as seen in the screenshot), which will be 775px wide (marked in gray area).
The 775px will hold the text onto the list and will not go beyond the boundaries along the page Hope this helps. :)

You could also make this with percentages or Bootstrap to make it responsive and work properly on mobile devices.
the layout that the picture works well for me only on version 0.6 (a screenshot from there) :P

on version 2.3** I just built in the place where the content should be, and the text goes beyond the boundaries of the design of the picture.

regarding cross-browser compatibility - I think that such a design will be very bad on mobile phones. because the frame for the content will occupy the lion's share of the screen, and the text will be severely deformed.

but you can not do that would be a mobile version different from the desktop, where to make these data in the CSS?

and I have not yet learned how to fight with this Bootstrap, it's difficult for me so far with him :? :roll:

*******************************************************************************************************************************
it's been 40 minutes......
have already found :lol:
now the code looks like this, and the text looks good in it:

Code: Select all

.grayFont {color: #000; padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 60px;}
.blueBackground {background: transparent;}
.whiteBackground {background: #000;
	background-image: url(left_top.png), url(left_bottom1.png), url(top_repeat_x.png), url(bottom_repeat_x.png), url(left_top.png), url(right_top.png), url(right_bottom.png), url(white_paper_right_repeat_y.png), url(center_y_repeat1.png);
background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y;
background-position: left top, right bottom, left top, left bottom, left top, right top, left bottom,  right top, left top;}
and in the template page (I'll show along with the text) began to look like this:
example1.png
example1.png (128.75 KiB) Viewed 8982 times
http://old.net.eu.org/ Get ready to hamsterization! 8-) code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
Post Reply