X3Photo Gallery Forums

GeoPal · 12 Oct 2016, 10:07

Hi Karl,
I have two questions. I am sure you can shed some light on them, thank you in advance!

1) Let's say inside Contacts page in the content area I have a map and some other info. I would like the (google) map to be "wide" from left to right end of screen, while the text bellow or above to be in "normal" column layout, e.g. it will be great if I can mix 2 types of layouts for this occasion.

2) The newly changed text logo styling made some changes to the color (I guess). Before my logo was Light grey and Dark grey, even when it rotated. Now it is again these monochromatic colours when in initial position, but when it rotates orange colour appears. Is there anyway I can keep the initial colours intact, maybe only shifting position?

Thanks, hope you could help!
Best, George

12 Oct 2016, 11:35

GeoPal wrote:1) Let's say inside Contacts page in the content area I have a map and some other info. I would like the (google) map to be "wide" from left to right end of screen, while the text bellow or above to be in "normal" column layout, e.g. it will be great if I can mix 2 types of layouts for this occasion.

Since the context "width" setting sets the width for the container itself, this will always be the maximum width of all content within, and you can't "break out" of that width for random elements inside. The solution therefore, is to set the main context width to wide (100%), and then instead, create custom row/column container elements for the sections you want limited by width. For example:

1. Set context module width to "wide", which will make the container 100% screen width.
2. Add html code

<!-- Add text to be limited by width inside a row column -->
<div class="row">
  <div class="small-12 medium-9 large-6 small-centered columns">
    Content here will be limited in width, same as "narrow".
  </div>
</div>

<!-- Add your Map, which will embed in the default 100% width -->
<iframe>blah blah. Remember to set height</iframe>

<!-- If you want another limited section below, just add another row/column element -->
<div class="row">
  <div class="small-12 medium-9 large-6 small-centered columns">
    more text limited by width
  </div>
</div>

For reference, the classes here are based on the Foundation Grid. You have many more options ...

GeoPal wrote:2) The newly changed text logo styling made some changes to the color (I guess). Before my logo was Light grey and Dark grey, even when it rotated. Now it is again these monochromatic colours when in initial position, but when it rotates orange colour appears. Is there anyway I can keep the initial colours intact, maybe only shifting position?

The 3D effect always created every other word in the primary-color (which in your case, is crimson) ... If you had the logo light/dark grey (before mouse hover), that must have been custom CSS. The same with mouse-hover ... The element that was "grey", would animate to primary color, while the element that was colored, would animate to a different grey.

Just checking your website, I only see ONE thing I don't quite understand. Why the 2nd word turns GREEN on hover ... It should turn "crimson", which is your selected primary color.

GeoPal · 13 Oct 2016, 03:41

Thank you Karl for the tips!
Here is what I managed to do with the map:
contact page

I can't seem to be able to set the height if the map though

<!-- Add your Map, which will embed in the default 100% width -->
<div id="map" class="flex-video x3-style-frame" style='height:20%;'>
</div>

I have tried the height with pixels also, still no luck. I am almost sure this is not the place to modify the height or maybe I am just not doing it right.

About the logo- you can see on this site also the colour changes to something very different. Have no idea why is that...
Best, G

13 Oct 2016, 10:28

First of all, you can't set HEIGHT as PERCENTAGE ... Percentage of what?

More importantly, you need to set HEIGHT (px) on the actual Google Map (iframe). Setting the height of the container will not affect the map inside.

13 Oct 2016, 10:31

Correction. I see you are using some kinda Google Map script? Then the height must be set from there ... You can't set the height from the wrapper container anyway, which you could even remove. I see the element inside has some "height: 100%; width: 100%; position: absolute; background-color: rgb(229, 227, 223);" ... Not sure if you set that, or the plugin ... That is what is setting the height anyway, NOT the "20%" you have set in the parent container, which cannot control the height of this plugin.

GeoPal · 13 Oct 2016, 10:48

Hi Karl,
I did check the custom Js. I didn't find any size clues, so I wrote here.
The size is obtained from the google map script (as it appears), but I don't quite get from the docs where to put the code.

<style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>

Thanks again!
Best, G

13 Oct 2016, 11:01

GeoPal wrote:Hi Karl,
I did check the custom Js. I didn't find any size clues, so I wrote here.
The size is obtained from the google map script (as it appears), but I don't quite get from the docs where to put the code.
Code
<style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>

Where did you get that CSS from? You would always add custom CSS to panel -> settings -> custom CSS ... But I don't see that the above will have any effect. This map, embedded with some Google maps plugin, is using several levels of elements that are set to absolute and 100% height, which you cannot "override" by simple CSS. See screenshot:

Height must be settable from your mymap() function, which I don't know who wrote ... It's yours? I see there is some mapOptions = {} ... I can't solve this for you. You need to check the documentation for this plugin, which clearly set the height.

GeoPal · 13 Oct 2016, 11:04

I see, I will try to check this.
The code is from google map customization, as I wanted monochrome map.
Thanks for the help.
Best, G

GeoPal · 14 Oct 2016, 07:13

Hi Karl,
Now I am trying to figure why I have coral color on logo rotation and on text background hover?
I have chosen a white theme and have put black main color. If I change the main color to something else, I still get the coral on these occasions.

I have tried to put this code in custom css:

.link-style:hover {
  background: rgb(250,0,0);
}

but I guess I didn't write it as it should as it has no effect on the background hover color.

Any ideas will be appreciated.
Thank you in advance, George

15 Oct 2016, 02:59

GeoPal wrote:Hi Karl,
Now I am trying to figure why I have coral color on logo rotation and on text background hover?
I have chosen a white theme and have put black main color. If I change the main color to something else, I still get the coral on these occasions.

You have definitely chosen CRIMSON red as your primary color, not BLACK. However, you are right ... I think we have a bug, as some colors are being inherited from the the skin default, instead of the selected primary color.

I will take a closer look in the coming week, and hopefully have a maintenance release available.

GeoPal · 17 Oct 2016, 00:44

Thank you Karl, I will be looking forward to the update!
Have a great week!
G

X3Photo Gallery Forums

Map and Logo styling11 posts

Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling

Re: Map and Logo styling