elxis 4.2 default template flex

[ipghmagnet]

Dear Sirs,

I try to move the right part to the left part. So i set positions of all modules in "right"to "left" .
www.die-casting-machinery.com
but there is no change.

Is this template only have right column?
Can it be 3 coloumn?

Thanks .

Ipghmagnet

[datahell]

The template has only one side column in which both "left" and "right" modules are being displayed. If you want to change its position from right to left you can do it by modifying the template's CSS.

Open file templates/flex/css/template.css
Go to lines 134 -135
Change this:
.flex_maincol { margin:0; padding:0 3% 0 0; width:74%; float:left; }
.flex_sidecol { margin:0; padding:0; width:23%; float:left; }
To this:
.flex_maincol { margin:0; padding:0 0 0 3%; width:74%; float:right; }
.flex_sidecol { margin:0; padding:0; width:23%; float:right; }

Save the file and you are ready.

[ipghmagnet]

Thanks for your kind reply.

I will follow..

[tommy]

Hi! I've got couple questions about adjusting Flex template into my needs. Could you please help?

1. How to displace Top Icons from top frame to the menu bar below? I attach a screen.



2. Can I change main menu font, font size and colours? If possible - where?
3. The IOS Slider is great. However it's got one little issue for me: it stretches images. Is it possible to not stretch images? Will that option be added or have I to look for another slider?

Cheers! 

[tommy]

Guys, I reeaallly need your support! 
Anyone?

[datahell]

Everything you ask depends on CSS. You can edit Flex's CSS file to change the style and layout of the template.

templates/flex/css/template.css

1. This is hard to describe from here. To do so you must redesign a big part of the template.

2. Edit "elx_menu" related CSS rules.
For example: .elx_menu li a { color:red; }

3. It stretches images because it has been designed that way to be responsive and capture the whole width of the area you place it.
I write you below how to change it but I don't advise this change. You might also have to do more changes than the one I write.

Open file modules/mod_iosslider/css/iosslider.css
Change this:
.iosslider_wrap .iosslider_images img { width:100% !important; border:none 0; max-width: none; margin:0; padding:0; }
To this:
.iosslider_wrap .iosslider_images img { border:none 0; max-width: none; margin:0; padding:0; }

[tommy]

Big thanks for reply!

1. So maybe it would be easier to put those icons one level lower - where the right side gallery is?
I really need to displace those icons from the top...

And another question: Can I put into footer just logo image? (Aligned to the right side).

[tommy]

1. Wouldn't it be just switching the icons part somewhere in that section?

/* LAYOUT */
.flex_wrap {
   margin:5px auto; padding:0; width:95%; max-width:1024px; overflow-x:hidden; background:#FFF; border:1px solid #C0C0C0; border-radius:8px; box-shadow: 0px 0px 1px 1px #CCCCCC;
}
.flex_top {
    margin:0; padding:0px; background-color:#F2F2F2; font:bold 24px/32px tahoma, arial, sans-serif; color:#717171;
}
.flex_logo { overflow:hidden; white-space:nowrap; display:block; float:left; width:100%; height:auto; }
.flex_logo a {
   display:block; text-decoration:none; outline:none; border:none;
   font:normal 32px/48px Helvetica, Arial, sans-serif; color:#717171; font-variant: small-caps; padding:0px; text-shadow: 3px 3px 0 #CFCFCF;
}
.flex_logo a:hover { color:#0B81E8; }
.flex_logo img { margin:0; padding:0; border:none; height:auto; width:auto; }
.flex_icons { width:340px; height:28px; padding:10px 0; float:right; overflow:hidden; white-space:nowrap; }
.flex_icons a {
   margin:0 3px 0 0; padding:0; text-decoration:none; outline:none; display:block; float:right; width:32px; height:32px;
   font:bold 24px/32px tahoma, arial, sans-serif; color:#717171; text-align:center;
   background:#E9E9E9 url(isprite.png) 0 0 no-repeat; border:1px solid #C0C0C0; border-radius: 3px;
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0. inset, 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 #FFFFFF;
   transition: background 0.3s ease-in-out;
   -webkit-transition: background 0.3s ease-in-out;
   -moz-transition: background 0.3s ease-in-out;
   -o-transition: background 0.3s ease-in-out;
}

a.flex_ihome { display:none; background-position:-32px -32px;}
a.flex_iyoutube { background-position:-64px -32px;}
a.flex_ilinkedin { background-position:-96px -32px;}
a.flex_ifacebook { background-position:-128px -32px;}
a.flex_itwitter { background-position:-160px -32px;}
a.flex_ilogin { background-position:-192px -32px;}
a.flex_icontact { background-position:-224px -32px;}
a.flex_ilang { background-position:-256px -32px;}
a.flex_isearch { background-position:-288px -32px;}
a.flex_imenu { display:none; background-position:-320px -32px;}
a.flex_ihome:hover { background-color:#F2F2F2; background-position:-32px 0;}
a.flex_iyoutube:hover { background-color:#F2F2F2; background-position:-64px 0;}
a.flex_ilinkedin:hover { background-color:#F2F2F2; background-position:-96px 0;}
a.flex_ifacebook:hover { background-color:#F2F2F2; background-position:-128px 0;}
a.flex_itwitter:hover { background-color:#F2F2F2; background-position:-160px 0;}
a.flex_ilogin:hover { background-color:#F2F2F2; background-position:-192px 0;}
a.flex_icontact:hover { background-color:#F2F2F2; background-position:-224px 0;}
a.flex_ilang:hover { background-color:#F2F2F2; background-position:-256px 0;}
a.flex_isearch:hover { background-color:#F2F2F2; background-position:-288px 0;}
a.flex_imenu:hover { background-color:#F2F2F2; background-position:-320px 0;}

.flex_topmods { margin:0; padding:0; font:normal 10px/12px tahoma, arial, sans-serif; color:#717171; }
.flex_topmods > div { margin:0; padding:2px 0; display:none; text-align:right; }

.flex_menu {
   display:block; margin:0 0 3px 0; padding:0; color:#FFFFFF; background-color:#555555;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #555555));
   background:-moz-linear-gradient(top, #666666 0%, #555555 100%);
   background:-webkit-linear-gradient(top, #666666 0%, #555555 100%);
   background:-o-linear-gradient(top, #666666 0%, #555555 100%);
   background:-ms-linear-gradient(top, #666666 0%, #555555 100%);
   background:linear-gradient(to bottom, #666666 0%, #555555 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#555555',GradientType=0);
}   
     
.flex_main { margin:0; padding:10px 10px 30px 10px; }
.flex_toppos { margin:5px 0 20px 0; padding:0; }
.flex_bottompos { margin:25px 0 5px 0; padding:0; }
.flex_maincol { margin:0; padding:0 3% 0 0; width:80%; float:left; }
.flex_sidecol { margin:0; padding:0; width:20%; float:left; }

.flex_footer, .flex_footer_darkgray { margin:20px 0 0 0; padding:15px; background-color:#555555; color:#FFF; }
.flex_footer_lightgray { margin:20px 0 0 0; padding:15px; background-color:#EFEFEF; color:#444444; border-top:1px solid #ccc; }
.flex_footer_blueblack { margin:20px 0 0 0; padding:15px; background-color:#1a2b46; color:#FFF; }
.flex_footer_darkred { margin:20px 0 0 0; padding:15px; background-color:#551d1d; color:#FFF; }
.flex_footer_darkgreen { margin:20px 0 0 0; padding:15px; background-color:#1a3712; color:#FFF; }

.flex_fmods { margin:5px 0 15px 0; padding:0; color:#FFF; }
.flex_fmods a { color:#f6ee90; }
.flex_fmods_left { margin:0 2% 0 0; padding:0; width:49%; display:block; float:left; }
.flex_fmods_right { margin:0 0 0 0; padding:0; width:49%; display:block; float:left; }
.flex_footer_lightgray .flex_fmods { color:#444444; }
.flex_footer_lightgray .flex_fmods a { color:#12507c; }

.flex_copyright { margin:40px 0 30px 0; padding:0; text-align:center; font:normal 12px/16px arial, helvetica, sans-serif; color:#555; }