Menu icon Foundation

Developer | Tournai

Java, Ruby, Ruby on Rails

My Posts


  • 1
    Reply
  • Override top bar background

    By Serguei Cambour

    top bar

    How is possible to override the default background of the nav bar in a Java project in a separate CSS file ? I tried to redefine it as follows (app.css): .top-bar { background: url(../images/bg_header.jpg) } but the original grey colour is still pr... (continued)

    Last Reply by Serguei Cambour over 2 years ago



  • 8
    Replies
  • Nested tables

    By Serguei Cambour

    table

    Is it possible to create (don't really know how exactly to name it) a nested table with Foundation 6 ? I mean, to have 1 table with 6 columns with proper headers, followed by another one with the number of columns < 6 and with own headers as well. As a... (continued)

    Last Reply by Serguei Cambour over 2 years ago







My Comments

Serguei Cambour commented on Serguei Cambour's post almost 2 years

I also found this article about organizing mixins and components. As far as I understood, the best way is to create partials  inside scss folder, then import them into scss/app.scss file. Right ?

Serguei Cambour commented on Serguei Cambour's post almost 2 years

Thank you, Erik, for your response. I think it would be wiser to create a SASS project inside the existing Java (or whatever) one and try to manage all the overrides in _settings.scss. More of that, in this case, a sass compiler will be available to minify ll the customer css's in the one and the only minified css. I've never tried that, so we'll see how it will be going on.
 
Best regards

Serguei Cambour commented on Serguei Cambour's post over 2 years

Figured out how to do that:
 
.top-bar, .top-bar ul {
background-color: none;
background: url(../images/awesome_header.jpg);
}

Serguei Cambour commented on Serguei Cambour's post over 2 years

OK, I removed Rails helper image_tag and used just pure Foundation tags:
<img data-interchange="[/assets/umed-image-large.jpg, (default)], [/assets/umed-image-small.jpg, (small-only)]">
And it fails to be redisplayed, - it works only if I refresh the page :( Any ideas ?

Serguei Cambour commented on Serguei Cambour's post over 2 years

@Stephen: thank you for your response. I believed and hoped that there existed something in F6 to get it done. Unfortunately, it is not the case.

Serguei Cambour commented on Serguei Cambour's post over 2 years

@Stephen: thank you for the suggestion. I modified a little bit your template to demonstrate an idea I'd like to achieve. I'd like to have the table containing Average age and Total persons columns to be placed just underneath the main table; Actually it happens only on small screens, and even in this case there is always a gap between both tables. Is it possible to get something like in this screenshot example ? Thank you.

Serguei Cambour commented on Serguei Cambour's post over 2 years

No way, I have just 2 divs as described earlier, one followed by another and can't figure out why. I see nothing unusual or something that could cause it.

Serguei Cambour commented on Serguei Cambour's post over 2 years

Yes, this is the solution I used: I put one table in the grid without offset, another one - in another div and used offset. But there is an empty line between two tables. I wonder if it s possible to achieve the same as in an Excel sheet or Word table so that both tables to be sticked together and have a border.
<div class="row">

  &lt;div class="small-12 columns"&gt;

    &lt;table&gt;

      &lt;thead&gt;

..

</div>

<div class="row">

  &lt;div class="small-1 medium-6 medium-offset-6 columns"&gt;

    &lt;table class="my_own_class"&gt;

...

</div>

 

Serguei Cambour commented on Serguei Cambour's post over 3 years

My bad, it could not be more stupid then that. I had to create some values (price plans) to be displayed before. No values - no display. Really stupid. I'd done in dev mode but forgot to do the same in production.

Serguei Cambour commented on Serguei Cambour's post almost 4 years

Sure, it is. If in Foundation 5, HTML templates were accessible directly in a separate part, in Foundation 6 they are hidden in building blocks section: http://zurb.com/building-blocks, - you should just click 3-5 times on 'Load more' button to see them.

Posts Followed

No Content

Following

    No Content

Followers

My Posts





My Comments

You commented on Serguei Cambour's post almost 2 years

I also found this article about organizing mixins and components. As far as I understood, the best way is to create partials  inside scss folder, then import them into scss/app.scss file. Right ?

You commented on Serguei Cambour's post almost 2 years

Thank you, Erik, for your response. I think it would be wiser to create a SASS project inside the existing Java (or whatever) one and try to manage all the overrides in _settings.scss. More of that, in this case, a sass compiler will be available to minify ll the customer css's in the one and the only minified css. I've never tried that, so we'll see how it will be going on.
 
Best regards

You commented on Serguei Cambour's post over 2 years

Figured out how to do that:
 
.top-bar, .top-bar ul {
background-color: none;
background: url(../images/awesome_header.jpg);
}

You commented on Serguei Cambour's post over 2 years

OK, I removed Rails helper image_tag and used just pure Foundation tags:
<img data-interchange="[/assets/umed-image-large.jpg, (default)], [/assets/umed-image-small.jpg, (small-only)]">
And it fails to be redisplayed, - it works only if I refresh the page :( Any ideas ?

You commented on Serguei Cambour's post over 2 years

@Stephen: thank you for your response. I believed and hoped that there existed something in F6 to get it done. Unfortunately, it is not the case.

You commented on Serguei Cambour's post over 2 years

@Stephen: thank you for the suggestion. I modified a little bit your template to demonstrate an idea I'd like to achieve. I'd like to have the table containing Average age and Total persons columns to be placed just underneath the main table; Actually it happens only on small screens, and even in this case there is always a gap between both tables. Is it possible to get something like in this screenshot example ? Thank you.

You commented on Serguei Cambour's post over 2 years

No way, I have just 2 divs as described earlier, one followed by another and can't figure out why. I see nothing unusual or something that could cause it.

You commented on Serguei Cambour's post over 2 years

Yes, this is the solution I used: I put one table in the grid without offset, another one - in another div and used offset. But there is an empty line between two tables. I wonder if it s possible to achieve the same as in an Excel sheet or Word table so that both tables to be sticked together and have a border.
<div class="row">

  &lt;div class="small-12 columns"&gt;

    &lt;table&gt;

      &lt;thead&gt;

..

</div>

<div class="row">

  &lt;div class="small-1 medium-6 medium-offset-6 columns"&gt;

    &lt;table class="my_own_class"&gt;

...

</div>

 

You commented on Serguei Cambour's post over 3 years

My bad, it could not be more stupid then that. I had to create some values (price plans) to be displayed before. No values - no display. Really stupid. I'd done in dev mode but forgot to do the same in production.

You commented on Serguei Cambour's post almost 4 years

Sure, it is. If in Foundation 5, HTML templates were accessible directly in a separate part, in Foundation 6 they are hidden in building blocks section: http://zurb.com/building-blocks, - you should just click 3-5 times on 'Load more' button to see them.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content