[opensuse-web] openSUSE Landing page using Bento
Hey All To learn CSS and other stuff, I have trying to use Ancor's bootstrap theme to make a landing page for openSUSE. My page looks like this : http://cheesemovers.us/bento/ My code is here at : https://github.com/manugupt1/opensuse-landing-page and I have been trying to use this webpage as reference using firebug https://connect.opensuse.org/travel-support I have been stuck here for a while now, A couple of things that I have tried is this : 1. Use the same structure as in travel-support app, but that did not work (even copy paste) 2. I notice that, <link href="css/bootstrap.css" rel="stylesheet" media="screen"/> <link href="css/bento.css" rel="stylesheet" media="screen"/> 3. On firebug, the css, for the same id ="global-navigation" is there but the css shows it as follows, <snip> #grid .core .spanX #global-navigation li.selected { } </snip> However, the original css file is as follows <snip> #grid .core .spanX #global-navigation li.selected { background: #666666 image-url('bento/gradient-dark-nav.png') repeat-x scroll bottom left; } </snip> I am offcourse very much prone to error as this is the first time I am trying out this. I will be grateful for all the hints and help. Thanks a lot -- Regards Manu Gupta -- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
Hey, On 14.05.2014 21:48, Manu Gupta wrote:
To learn CSS and other stuff, I have trying to use Ancor's bootstrap theme to make a landing page for openSUSE.
Cool
I am offcourse very much prone to error as this is the first time I am trying out this. I will be grateful for all the hints and help.
You reference jquery but you don't have it in your repo. Include it and see how far you can go :-) Henne -- Henne Vogelsang http://www.opensuse.org Everybody has a plan, until they get hit. - Mike Tyson -- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
Hey Henne,
On Thu, May 15, 2014 at 5:02 PM, Henne Vogelsang
Hey,
On 14.05.2014 21:48, Manu Gupta wrote:
To learn CSS and other stuff, I have trying to use Ancor's bootstrap theme to make a landing page for openSUSE.
Cool
I am offcourse very much prone to error as this is the first time I am trying out this. I will be grateful for all the hints and help.
You reference jquery but you don't have it in your repo. Include it and see how far you can go :-)
That did not work.. http://cheesemovers.us/bento Have a look at this, If we remove the padding from navbar-inner and add background-color:#333333, things seem to work fine.
Henne
-- Henne Vogelsang http://www.opensuse.org Everybody has a plan, until they get hit. - Mike Tyson -- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
-- Regards Manu Gupta -- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
Hey, On 15.05.2014 20:29, Manu Gupta wrote:
If we remove the padding from navbar-inner and add background-color:#333333, things seem to work fine.
Phew I don't know where to begin to explain :-/ The travel-support programm app is not just a web page but a ruby on rails app that has lots of stylesheet/javascript "magic" behind the scenes. It uses bootstrap with LESS(http://lesscss.org/) and the rails asset pipeline to make parts of bootstrap look like bento. For details see https://github.com/openSUSE/travel-support-program/tree/master/app/themes/be... That is something completely different than you do, you can't just take it 1:1. What you can try to figure out is how to use LESS in your page and then"port" the way Ancor did it to your solution. HTH Henne -- Henne Vogelsang http://www.opensuse.org Everybody has a plan, until they get hit. - Mike Tyson -- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
On 05/16/2014 01:01 PM, Henne Vogelsang wrote:
Hey,
On 15.05.2014 20:29, Manu Gupta wrote:
If we remove the padding from navbar-inner and add background-color:#333333, things seem to work fine.
Phew I don't know where to begin to explain :-/
The travel-support programm app is not just a web page but a ruby on rails app that has lots of stylesheet/javascript "magic" behind the scenes. It uses bootstrap with LESS(http://lesscss.org/) and the rails asset pipeline to make parts of bootstrap look like bento. For details see
https://github.com/openSUSE/travel-support-program/tree/master/app/themes/be...
That is something completely different than you do, you can't just take it 1:1. What you can try to figure out is how to use LESS in your page and then"port" the way Ancor did it to your solution.
In fact, when developing the TSP application I did my best in trying to stay away from the rails magic to obtain a portable (not Rails specific) bootstrap theme. But even without the Rails magic, there is still LESS magic because... well, because LESS is the standard mechanism for creating bootstrap themes. In this thread, it's explained how you can obtain a compiled bento-themed bootstrap.css from the bento theme included in the TSP app (just changing two lines). http://lists.opensuse.org/opensuse-web/2014-04/msg00020.html And here you can see the result of applying it to Manu's proposal (which is the expected look, I guess). https://github.com/ancorgs/opensuse-landing-page That's how bootstrap themes usually work. You don't include a vanilla bootstrap.css and my_theme.css. Instead of doing that, you create your theme using LESS and then you compile bootstrap.less + my_theme.less to get a compiled css with your flavored bootstrap. Not sure if I explained it well enough. Don't hesitate to ask. Cheers. -- Ancor González Sosa openSUSE Team at SUSE Linux GmbH -- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
Hey
On Fri, May 16, 2014 at 9:55 PM, Ancor Gonzalez Sosa
On 05/16/2014 01:01 PM, Henne Vogelsang wrote:
Hey,
On 15.05.2014 20:29, Manu Gupta wrote:
If we remove the padding from navbar-inner and add background-color:#333333, things seem to work fine.
Phew I don't know where to begin to explain :-/
The travel-support programm app is not just a web page but a ruby on rails app that has lots of stylesheet/javascript "magic" behind the scenes. It uses bootstrap with LESS(http://lesscss.org/) and the rails asset pipeline to make parts of bootstrap look like bento. For details see
https://github.com/openSUSE/travel-support-program/tree/master/app/themes/be...
That is something completely different than you do, you can't just take it 1:1. What you can try to figure out is how to use LESS in your page and then"port" the way Ancor did it to your solution.
In fact, when developing the TSP application I did my best in trying to stay away from the rails magic to obtain a portable (not Rails specific) bootstrap theme.
But even without the Rails magic, there is still LESS magic because... well, because LESS is the standard mechanism for creating bootstrap themes.
In this thread, it's explained how you can obtain a compiled bento-themed bootstrap.css from the bento theme included in the TSP app (just changing two lines). http://lists.opensuse.org/opensuse-web/2014-04/msg00020.html
This is the part I have been screwing around and still have not gotten to it.
And here you can see the result of applying it to Manu's proposal (which is the expected look, I guess). https://github.com/ancorgs/opensuse-landing-page
That's how bootstrap themes usually work. You don't include a vanilla bootstrap.css and my_theme.css. Instead of doing that, you create your theme using LESS and then you compile bootstrap.less + my_theme.less to get a compiled css with your flavored bootstrap.
Got it.
Not sure if I explained it well enough. Don't hesitate to ask.
Cheers.
-- Ancor González Sosa openSUSE Team at SUSE Linux GmbH
-- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
-- Regards Manu Gupta -- To unsubscribe, e-mail: opensuse-web+unsubscribe@opensuse.org To contact the owner, e-mail: opensuse-web+owner@opensuse.org
participants (3)
-
Ancor Gonzalez Sosa
-
Henne Vogelsang
-
Manu Gupta