BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Templates
  New Posts New Posts RSS Feed - Question about responsive-01 template
  FAQ FAQ  Forum Search   Register Register  Login Login

Question about responsive-01 template

 Post Reply Post Reply Page  12>
Author
Message
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post Topic: Question about responsive-01 template
    Posted: Oct 09 2015 at 10:44am
Hello OE! Smile

okey here's a several question i want to ask about responsive-01 template.
___________________________________________________________________________
1. How to hide text on Panel_LogoBig when resizing to mobile or tablet mode? like Navbar, but nothing to 'show' (minimenubutton).
example : This is top panel on desktop mode
 
i want to hide the text on my Biglogo, just leave the logo, so i dont have to scrolldown like this


FYI, i want to hide several content when resizing, (ex: search Box, media social button etc,)
___________________________________________________________________________
2. how to edit undefault language?
I'm from indonesia btw, i want to put bahasa as default and english on my website, as you know translator not always translate as we want right?
___________________________________________________________________________
3.how to edit minimenu?
i want to put several content on my minimenu like search box, media social button etc,
it is possible?
___________________________________________________________________________
4. how to resizing text on responsive mode?
i have try several trick, buat all failed-__-
___________________________________________________________________________

oket that's my questions for now, maybe i'll make another one in the future.
i appreciated any answer for anyone who help me Handshake

i know you there D, i can smell you hue he he he... Big smile




Edited by kareemramd - Oct 09 2015 at 11:37am
Embrace the Madness
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 09 2015 at 12:32pm
Hi.

1) 
 - Put (or add with a space if there's already something) a Custom Class in the Properties of an element to hide, ex. no-mobile

 - Add a Code Block type CSS position Header with the code:

@media (max-width: 900px) {
  .no-mobile { display: none !important; }
}

2) You can edit languages in Project->Preferences->Languages - select, unselect, add or remove, set as default.

3) I think it is possible, but you should be careful not to affect what's already in it. Make sure to maka a reserve copy of your project folder (ex. by Project->Other->Backup the project, make sure to know where the backup ZIP file is written). The Group of elements corresponding to the mini-menu is on the top-left in the Editor when you edit the base layer.

4) You need to give more info (as much as possible) about what you want. If you want to change the font size, it's similar to 1) - you add a Custom Class, and add the code in the Code Block CSS:

@media (max-width: 767px) {
  .mobile-font-size { font-size: 140%; }
}

Back to Top
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post Posted: Oct 09 2015 at 2:08pm
thank's alot D!!!
okey i get it!
1) but what layer i should put CSS code? base_layer, base_layer_uncompressed, or i make new CSS code block on Base_menuretraceable?

2) i mean edit language manualy without translate machine.

3)could you be specific D? what base layer? i cant find the editor.

4) okey the question similar to question 1), what layer i should put the CSS code?

Edit!!!:
i understand question number 2 D!  thank's alot!! i thought its translate automatically hehe


Edited by kareemramd - Oct 09 2015 at 2:12pm
Embrace the Madness
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 09 2015 at 5:33pm
1, 4) You can put it anywhere, for example into the existing CSS block in the Base_menuretractable layer. Or create a new Block on the page itself if it doesn't need to be shared between pages.

3) I did a test and it seems to work:
 - Go to the Base_menuretractable layer
 - Add a new Group of elements and put all you need to add into it
 - In the top-left corner of the page, click on the "(AutoMenu)" element - it is inside the Group containing the mini-menu. To add your new Group under it, drag the Group so that you ssee a red inside line under the (AutoMenu) element. You can then modify the width (100%, for example) and other styles.


Back to Top
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post Posted: Oct 10 2015 at 10:01pm
its work D! thank's!
but....
i try to make image logo auto centering to horizontal when resizing, i try many way D,

i put this script (CSS block code) that i found on internet for centering horizontal:

@media (max-width: 480px) {
  .center-logo {  margin: 0 auto !important;
}

but nothing happen (FYI i've put center-logo to cutom classes).
any sugesstion?

and

how to remove the scrolldown D? i've manage the searchbox so fit on the group of element, but i've try many way to remove it, i got no result D :(

i found this script on internet:
<form action="/search" method="get" class="form">
    <input type="text" name="q" value="" class="search"/>
    <input type="submit" value="Search" class="button"/>
</form>
<style type="text/css">
.form {
                width:500px;
                margin:50px auto;
}
.search {
                padding:8px 15px;
                background:rgba(50, 50, 50, 0.2);
                border:0px solid #dbdbdb;
}
.button {
                position:relative;
                padding:6px 15px;
                left:-8px;
                border:2px solid #207cca;
                background-color:#207cca;
                color:#fafafa;
}
.button:hover  {
                background-color:#fafafa;
                color:#207cca;
}
</style>

(FYI: i put on code block visual)

oh ya D, did action="/search" would working if my website ready?

btw, many thank's to you D Smile

Embrace the Madness
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 11 2015 at 9:39am
To center an element, select it and right-click or use the Selection menu onthe top and apply Centering->Horizontal

What do you call "scrolldown"?

To search things, look on the Web how to use Google to search on your own website. OE users (French) do it but I don't remember how.
Back to Top
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post Posted: Oct 11 2015 at 9:58am
i mean center an element when resizing D, if i use that it will centered in desktop mode.

this scroll buddy


okey D i'll try to search, thank's again Smile
Embrace the Madness
Back to Top
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post Posted: Oct 11 2015 at 4:24pm
no suggestion?._.v

okey... i have fixed it btw... but its really frustating-__- because i've to edit it for every size (not automatically like centering horizontal on the auto centering menu)

so this is my solution: for example, i put this code for 320px width.
@media (max-width: 320px) {
  .centering-logo { margin-left: 43px;  !important; }
}

for every responsive size like 320px, 480px etc, i have to change margin-left value, its make pretty tired bro-__-

but no problem, importanly i've fixed my issue.

thank's~

EDIT!!:
its doesn't work-__- you can't make more than one CSS code block for one class-__- dayum meh!


Edited by kareemramd - Oct 11 2015 at 4:42pm
Embrace the Madness
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Oct 12 2015 at 8:53am
1) The traditional centering technique when the size is known is rather simple:

.centering-logo { 
left: 50% !important;
margin-left: -100px;  !important;  /* replace 100 by half the width of your logo */
}

I tested it on the "smaller" logo in Responsive01 and it works.

2) You can have as much CSS code per class as you wish, just in case of media queries you should order it correctly (ex. if you put @media (max-width: 320px) first then @media (max-width: 640px) , the 320px one will never be applied).

3) Please make an effort to post as clean messages as possible. I am overloaded with questions on 2 forums and with the work.

4) I still don't know what the scrolldown is. Is this the small arrow, or the whole dropdown "auto menu"? If you remove the auto menu, how will you be able to browse on smaller screens?
Back to Top
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post Posted: Oct 12 2015 at 1:13pm
1) it's work D! thank's again!

2) absolutly right

3) sorry._.

4) i mean scrollbar D my bad hehe, did you see red arrow on the image above? if you see clearly, theres a white mini scrollbar


Edited by kareemramd - Oct 12 2015 at 1:15pm
Embrace the Madness
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.