Community
Participate
Working Groups
I'm not sure if this is a "user question", or request for documentation, or request for "new function", but ... I'd like to convert our Platform download pages to the solstice theme, AND use one of the "Barebones static HTML template" files as documented in https://eclipse.org/eclipse.org-common/themes/solstice/docs/ I think I'd might be able to figure it out using the "full model", with the App class, etc., but ... that's what I am trying to avoid. In the past, there were some pretty clear cut CSS files associated with themes, that I could study and figure out what to do ... but, I don't see what I was expecting. Only "solstice/public/stylesheets/styles.min.css" for these "minimal" cases, and unless I am missing it, do not see that is has "leftnav", "leftcolumn", "midcolumn", or "homeitem" type items like Nova did. Any advice? Pointers to what I am missing? Or, is this "just not possible" using the minimal static html approach? (currently :)
Hi David, you could look at the HTML from the starterkit for the left nav: https://eclipse.org/eclipse.org-common/themes/solstice/docs/starterkit/ <aside class="col-md-4" id="leftcol"> <ul class="ul-left-nav fa-ul hidden-print" id="leftnav"> <li class="separator"> <a href="/eclipse.org-common/themes/solstice/docs/" class="separator"> Solstice </a> </li> </ul> </aside> For the css, we are now using less. The source is available on github: https://github.com/chrisguindon/solstice-assets The CSS for the left nav is available here: https://github.com/chrisguindon/solstice-assets/blob/master/stylesheets/template/menu/menu.less You can fetch and compile the css for solstice with node, bower and grunt. 1. cd eclipse.org-common/themes/solstice 2. npm install 3. bower install 4. grunt watch You should install node, bower and grunt before running these commands. * Bower http://bower.io/ * npm https://github.com/npm/npm * grunt http://gruntjs.com/ After running bower install, you should see all the required assets in "eclipse.org-common/themes/solstice/bower_components". Please let me know if you have any other questions. Cheers,
Words can not express ... how *complicated* it was installing all these tools and making any sense out of them! But, I eventually did and if they are "the future of web development" all I can say is "too bad". All (half) in jest ... I'm sure it takes more that 3 or 4 hours to appreciate to power of this approach. If you are interested in seeing what I can accomplish (mostly) out of the box, with the "thin theme", see https://bugs.eclipse.org/bugs/attachment.cgi?id=249042 I think there will have to be a lot of customization, from there, though. But, I think you've given me the basics to understand what's going on ... after another half dozen "4 hour" study sessions :) = = = = = = = = = = = = = = = = = = = = = One thing confusing from the start (even before this question) was I can click on the "download starter kit" on the page at https://eclipse.org/eclipse.org-common/themes/solstice/docs/starterkit/ and, I get some php page that obviously does something, but was not at all obvious what. It was only after I did wget https://eclipse.org/eclipse.org-common/themes/solstice/docs/ Did I see "<aside>" and other CSS classes used in the downloaded index.html. Not sure how you intend it to work ... but ... for other naive people like me, you might want to make that clearer on the web page? (Just trying to be helpful). = = = = = = = = = = = = = = = = = = = = = I realize you all have not designed your web for "static html", but instead assume that PHP can do a lot of the processing ... and, in places, there really are some very slick "php techniques" used ... but, IMHO, it'd be better for "consumers" to have normal HTML and CSS (all standards based :) that to have things "hidden" in the PHP processing or JavaScript processing. Makes it kind of hard for the community to provide fixes -- I'm guessing! -- perhaps most of the community is better acquainted with some of these techniques (and tools). Don't mean to complain ... just couldn't resist giving my advice :) ... but most of all appreciate your help and the pointers you've given. Very interesting stuff (if nothings else).
> Words can not express ... how *complicated* it was installing all these > tools and making any sense out of them! I can imagine. That's web developer stuff. If you cannot just include() all of the eclipse.org-common stuff and have to do it on your own, I use the Barebones templates that are on the docs page: Barebones static HTML template A barebone HTML header & footer to adapt the look to subsites, such as Bugzilla, Forums, Mailing lists & events.eclipse.org. If you're building a page on download.php have you tried this: <?php include($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/themes/solstice/html_template/header.php") echo "Hello"; include($_SERVER['DOCUMENT_ROOT'] . "/eclipse.org-common/themes/solstice/html_template/footer.php") ?>
(In reply to Denis Roy from comment #3) > > Words can not express ... how *complicated* it was installing all these > > tools and making any sense out of them! > > I can imagine. That's web developer stuff. Yes, that's the shame of it ... I used to be a web developer! And, I was just catching up to HTML 5 and CSS3 and now that sounds like its already old hat. :) > If you cannot just include() all of the eclipse.org-common stuff and have to > do it on your own, I use the Barebones templates that are on the docs page: > > Barebones static HTML template > > A barebone HTML header & footer to adapt the look to subsites, such as > Bugzilla, Forums, Mailing lists & events.eclipse.org. > That is basically what I am after, only I opted to use "thin" ... but, I wanted just a little bit more ... but, not the whole thing ... I know, hard to satisfy everyone. :) > If you're building a page on download.php have you tried this: > > <?php > include($_SERVER['DOCUMENT_ROOT'] . > "/eclipse.org-common/themes/solstice/html_template/header.php") > echo "Hello"; > include($_SERVER['DOCUMENT_ROOT'] . > "/eclipse.org-common/themes/solstice/html_template/footer.php") > ?> By "build" do you mean with "node" and "grunt" etc.? I have not tried that, but at first I thought you meant to put that on server, and then do wget http://download.eclipse.org/eclipse/downloads/testTheme.php just to see better what it is converted to, but I get an blank page from browser, and a ERROR 500: Internal Server Error. when using wget. So, if you meant "build with grunt" ... Yeah, I might do that when I get another 4 hours free. :) [And, in case any readers don't know me and my personality, for all the moaning I do, I think you guys have done a *great* job of providing this new theme, *and* maintaining most things as compatible, if using the "standard" ways of doing things and in addition providing the static HTML for some basic cases. Much appreciated.]
> By "build" do you mean with "node" and "grunt" etc.? Heck no :) I meant "plop that code in a file using vi" > ERROR 500: Internal Server Error. > when using wget. > So, if you meant "build with grunt" ... Yeah, I might do that when I get > another 4 hours free. :) Please don't. I did some debugging, and as it turns out, there are some path errors in doing it that way on download.eclipse.org. Oh well, it was worth a shot. To get solstice onto Forums and Bugzilla, what I did was wget -O header.html http://eclipse.org/eclipse.org-common/themes/solstice/html_template/header.php wget -O footer.html http://eclipse.org/eclipse.org-common/themes/solstice/html_template/footer.php Then you can use PHP to wedge content inside the static versions: <?php include "header.html"; echo "Hello"; include "footer.html"; ?> I took the liberty of doing that into your directory, in the interest of saving you time. Have a look:http://download.eclipse.org/eclipse/downloads/testTheme.php
(In reply to Christopher Guindon from comment #1) > > Please let me know if you have any other questions. > I have a few, I hope this bug is an ok place to ask them? You can see what I came up with as a "first draft" of a left nav bar, at http://download.eclipse.org/eclipse/downloads/drops4/I20141207-2000/ I was trying to semi-duplicate what we had before (it is not even really "Nova", as far as I know, but something pure custom ... probably 10 years old? but an example of the old one can be seen at http://download.eclipse.org/eclipse/downloads/drops4/S-4.5M3-201410292000/ My questions all refer to the new version. Is that left most gutter of white space intentional? for all "container content"? I could not really see where that was defined, or controllable. Since I couldn't get the left nav over more to the left, I had to make it larger, and used col-md-6 (instead of "4" as in your example). So, that leads me to ask two things: A. what grid system are "we" using? I saw where Bootstrap has a 12 column grid, but thought I saw in some of the docs that Eclipse is using a 24 column grid? B. I was surprised I could use "6" to make the left nav wider, without messing up something else ... are "midcolumn" and "rightcolumn" defined with some fixed number of columns somewhere? I couldn't find them ... .and want to be sure everything adds up to 12, or 24, depending on answer to "A". Now for the hard questions. :) I'm trying to think of alternatives to using a nav bar at all, for pages like that one. I'm wondering if there's any "built-in" "cool" alternatives that come to mind. For example, any javascript that would compute a table of contents, to put at top? Or, any of those little "twisties" like Equinox page uses, so each of our sections could be collapsed (or, probably start off with SDK "open", but rest collapsed). (For the Equinox twisties, see http://download.eclipse.org/equinox/drops/S-MarsM3-201410292000/index.php) What I'm asking for is not as general as it sounds ... I'm curious if there is "an Eclipse Solstice" way to do these sorts of things, so would look relatively uniform. I realize I could "come up with our own javascript" but a) was wanting to avoid the work and b) wanted to be sure to have a uniform look and feel, if possible. Thanks for any advice.
(In reply to David Williams from comment #6) > (In reply to Christopher Guindon from comment #1) > > > > > Please let me know if you have any other questions. > > > > I have a few, I hope this bug is an ok place to ask them? This is definitely the right place to ask questions! > > You can see what I came up with as a "first draft" of a left nav bar, at > http://download.eclipse.org/eclipse/downloads/drops4/I20141207-2000/ I like what I am seeing already! > > I was trying to semi-duplicate what we had before (it is not even really > "Nova", as far as I know, but something pure custom ... probably 10 years > old? but an example of the old one can be seen at > http://download.eclipse.org/eclipse/downloads/drops4/S-4.5M3-201410292000/ > > My questions all refer to the new version. > Is that left most gutter of white space intentional? for all "container > content"? > I could not really see where that was defined, or controllable. Yes it's intentional but you can fix this by adding <div class="row"> after <div id="novaContent">. Please make sure to close <div class="row"> before the #novaContent closing </div>. > > Since I couldn't get the left nav over more to the left, I had to make it > larger, and used col-md-6 (instead of "4" as in your example). So, that > leads me to ask two things: > A. what grid system are "we" using? I saw where Bootstrap has a 12 column > grid, but thought I saw in some of the docs that Eclipse is using a 24 > column grid? Correct, we are using a 24 column grid for more flexibility. > B. I was surprised I could use "6" to make the left nav wider, without > messing up something else ... are "midcolumn" and "rightcolumn" defined with > some fixed number of columns somewhere? I couldn't find them ... .and want > to be sure everything adds up to 12, or 24, depending on answer to "A". Yes, "midcolumn" and "rightcolumn" are defined with a fixed number of columns. We are doing this to support pages that were created for nova. https://github.com/chrisguindon/solstice-assets/blob/master/stylesheets/legacy.less Fell free to use the bootstrap column classes instead of "#rightcolumn" and "#midcolumn". You can probably remove the id if you chose to use a bootstrap column class. > > Now for the hard questions. :) > > I'm trying to think of alternatives to using a nav bar at all, for pages > like that one. I'm wondering if there's any "built-in" "cool" alternatives > that come to mind. For example, any javascript that would compute a table of > contents, to put at top? Or, any of those little "twisties" like Equinox > page uses, so each of our sections could be collapsed (or, probably start > off with SDK "open", but rest collapsed). (For the Equinox twisties, see > http://download.eclipse.org/equinox/drops/S-MarsM3-201410292000/index.php) Would the bootstrap accordion work for you? http://getbootstrap.com/javascript/#collapse > > What I'm asking for is not as general as it sounds ... I'm curious if there > is "an Eclipse Solstice" way to do these sorts of things, so would look > relatively uniform. I realize I could "come up with our own javascript" but > a) was wanting to avoid the work and b) wanted to be sure to have a uniform > look and feel, if possible. Anything from the Bootstrap JavaScript page should work with solstice: http://getbootstrap.com/javascript/ It's probably better to use something on that page before writing custom JavaScript :) > > Thanks for any advice. Feel free to ask us more questions! Cheers,
Next question: :) I know that in https://eclipse.org/eclipse.org-common/themes/solstice/docs/ it says "*Glyphicons is not included with Solstice." [assume that has to do with legal/fee reasons?] But, my question is, ... in styles.min.css there is some sort of "font awesome" icon defined for fa-icon-circle (and similar). So ... I thought it might be some icon, and just not "Glyphicons" ... but, when I try to use it, with something like <i class="fa-icon-circle" /> I just get one of those little "unprintable binary" symbols in by browser, instead of any sort of icon. Is that the result of "*Glyphicons is not included with Solstice." or, could I be doing something else wrong? Is some "initialization" needed? (other than 'link' to the style sheet? FYI, the problem I am trying to solve is to have a consistent icon to mean "for additional helpful detailed information see ... " (which then links to a sort of "glossary". And, it seems like an i with a circle around it has come to mean pretty much that.
(In reply to David Williams from comment #8) > Next question: :) > > I know that in > https://eclipse.org/eclipse.org-common/themes/solstice/docs/ > it says "*Glyphicons is not included with Solstice." > > [assume that has to do with legal/fee reasons?] > > But, my question is, ... in styles.min.css there is some sort of "font > awesome" icon defined for fa-icon-circle (and similar). So ... I thought it > might be some icon, and just not "Glyphicons" ... but, when I try to use it, > with something like <i class="fa-icon-circle" /> I just get one of those > little "unprintable binary" symbols in by browser, instead of any sort of > icon. I was able to manually insert <i class="fa fa-circle-o-notch"></i> on http://download.eclipse.org/eclipse/downloads/drops4/I20141207-2000/. This tells me that the fonts exists on the server. You might want to look at the errors in the console of your browser. It will give you a better idea of what is happening. I could probably help you better with a live example. > > Is that the result of "*Glyphicons is not included with Solstice." > or, could I be doing something else wrong? Is some "initialization" needed? > (other than 'link' to the style sheet? Actually, I need to update the docs. We added it last week. It was original removed because we primarily use font-awesome and I wanted to save on bandwidth. > > FYI, the problem I am trying to solve is to have a consistent icon to mean > "for additional helpful detailed information see ... " (which then links to > a sort of "glossary". And, it seems like an i with a circle around it has > come to mean pretty much that. You should definitely use font-awesome for this, it will help make our website more consistent :)
(In reply to Christopher Guindon from comment #9) > (In reply to David Williams from comment #8) > > Next question: :) > > I was able to manually insert <i class="fa fa-circle-o-notch"></i> on > http://download.eclipse.org/eclipse/downloads/drops4/I20141207-2000/. This > tells me that the fonts exists on the server. > Ah, perfect ... all I was missing was the initial "fa" class ... I had not seen that in examples (or, missed it) but once I added, it worked fine (for both fa-info and fa-circle-info). I'm beginning to think there is more merit than I thought, to updating and standardizing our 10 year old web pages :) Thanks for making it so easy. Well ... except for docs being out of date :) but, we all do that ... I'm glad to "prode" you by bleeding on the edge.
(In reply to David Williams from comment #10) > (In reply to Christopher Guindon from comment #9) > > (In reply to David Williams from comment #8) > > > Next question: :) > > > > > I was able to manually insert <i class="fa fa-circle-o-notch"></i> on > > http://download.eclipse.org/eclipse/downloads/drops4/I20141207-2000/. This > > tells me that the fonts exists on the server. > > > > Ah, perfect ... all I was missing was the initial "fa" class ... I had not > seen that in examples (or, missed it) but once I added, it worked fine (for > both fa-info and fa-circle-info). > > I'm beginning to think there is more merit than I thought, to updating and > standardizing our 10 year old web pages :) > > Thanks for making it so easy. Well ... except for docs being out of date :) > but, we all do that ... I'm glad to "prode" you by bleeding on the edge. Thanks! The docs is up to date now :)
(In reply to David Williams from comment #10) > > Ah, perfect ... all I was missing was the initial "fa" class ... I had not > seen that in examples (or, missed it) but once I added, it worked fine (for > both fa-info and fa-circle-info). > And, the first thing I see as I look at examples on the web this morning ... an obvious "fa" class before the icon class name. So much for my late night reading abilities. Thanks again,
