I would like to have each and every page on my site to have a skeleton structure as mentioned below. Based on the template selected by the user (saved choice/default css) the appearance of the page changes.
I am planning to use 960.gs or blueprint CSS framework for layout handling.
I am a newbie to CSS and layouts. Best example for my requirement would be how its done on jimdo.com/weebly.com. I am looking for advice so that I can learn this fast and implement it in iterations.
Whats the best approach to solve such design problems. I am sure it needs creative bend but as of now I would like to take bookish approach so that I can use it for my own solution.
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
This 3 column layout generator may help.
Related
Here is my code so far, basically i'm just trying to create a well behind everything. It will be a single column of content.
<div class="well" id="well">
<h1>Aphex Twin</h1>
<h6><em>The genius behind IDM's greatest tracks</em></h6>
<center><a href><img align="middle" src="http://img.photobucket.com/albums/v669/Baloonda/Webmaster%20stuff/1739519.jpg" width="682.666 height="416"/></a></center>
</div>
I don't know what I did wrong. This is all html. I'm not sure if the divs are css properties exclusively? Is there a way to do this with bootstrap? After a couple different tries I still couldn't get it to work. This is my best guess.
sidenote: I'm using http://codepen.io maybe there is a known bug which doesnt allow wells to be made?
Did you try putting it inside a container
<div class="container">... </div>
And linked to a bootstrap stylesheet?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
If in trouble, try look to here for examples: https://www.w3schools.com/bootstrap/bootstrap_wells.asp
For some reason Semantic-ui's grid is 16 wide and I'm working on an Orchard Cms theme for that (couldn't find one elsewhere).
In case anyone else is looking. I found that currently as of Orchard CMS 1.10.2 you can do this on the front-end but not the backend.
Here is an example of how the front-end grid was changed for bootstrap: https://github.com/OrchardCMS/TheBootstrapMachine/tree/master/Views/Elements
And the reason you can't change the admin page grid: https://github.com/OrchardCMS/Orchard/blob/6720b71cf3474a9a7b8a8cc9a99d58b1e733acfa/src/Orchard.Web/Modules/Orchard.Layouts/Elements/Grid.cs#L6
As you can see 12 is hardset in the code. I suppose you could extend the entire layout module, but this would be a lot of work because several other modules depend on it.
I plan to use Semantic-ui anyway but using their grid using this nomenclature:
<div class="ui twelve column grid">
<div class="four wide column">four</div>
<div class="four wide column">four</div>
<div class="four wide column">four</div>
</div>
I would like to change the call to action button on the landing page of my website to a social icons element. How do I edit the HTML code to do this? I am using the "Paris - Business" theme. Thanks.
There is some documentation on how to do this, if you search the web. For example, my own site has a basic example of what to look for Landing Page Button Removal.
In that case, you could replace the code that makes the button with your own code.
That being said, there's some new features you can use that would make the content editable. Weebly just introduced "Sections". Sections allows you to have different sections on a page, and with that you can also drag and drop into the Header area. (See Screenshot)
*BUT, before you go ahead and do this, I should note that Weebly plans on making these changes to the newer themes, in the near future. When Paris would be done, or if it will be done, is anybody's guess.
Depending on the design of your Theme, this might be slightly different, so please keep that in mind.
Basically, for the Paris Theme, what was:
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
<span id="contentArrow"><span></span></span>
</div>
</div>
</div>
Would become:
<div class="banner-wrap wsite-background">
<div class="container">
{{#header}}
<div class="banner">
{content}
<span id="contentArrow"><span></span></span>
</div>
{{/header}}
</div>
</div>
*If you are customizing a Theme, I might also recommend making a custom page type, specifically with these changes.
If you want to use Sections, for the content area of the page it would look something like:
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
**Note: There isn't any documentation yet, and I have not tested this, so wsite-background may not be needed... but don't take my word for it.
I cannot figure out how to change a text in the header section of my site. I am trying to do this in my custom module's theme. This is how my header looks like:
<header>
<div class="container">
<div class="row-fluid">
<div id="Logo"><h1>#WorkContext.CurrentSite.SiteName</h1></div>
<h3>[ We Know Business ]</h3>
<a class="btn btn-navbar btn-menuh" data-parent="#collapse-nav" data-target=".collapse-menuh">btn</a>
<a class="btn btn-navbar btn-search" data-parent="#collapse-nav" data-target=".collapse-search">btn</a>
</div>
</div>
</header>
I changed [We Know Business] to [We know Businesses] but the updated text is not coming up on any page of my site.
However, my main objective is to use HTML5 and Responsive compatibility in IE8 by injecting conditional CSS and js like this:
<!--[if lt IE 9]>
<script src="/themes/intrust/js/html5shiv.js"></script>
<![endif]-->
I cannot see the above snippet in "View Source" option.
The reason I changed the text only to check whether I am doing it at the right place or not. When it didn't work I turned Shape Tracing tool on to see what template is being used for the header. But could not highlight any part of the header at all!
Isn't Layout.cshtml of my custom theme liable to render the header section? If not, which template I have to look for?
I must be doing something wrong here but cannot figure out what! Please help!
NB: I tried resetting IIS several times but had no luck either.
This is a bit late but what you are looking for is overriding document.cshtml.Orchard has a default in the folder Orchard\src\Orchard.Web\Core\Shapes\Views folder. Copy the file document.cshtml to your theme and put the items that you want in the header section of this document.
I have a site that was built and handed over to me, so I'm not as familiar with ModX as I'd like to be. That said, I've built my own templates, tpls and the like.
However, and existing MIGX using template is giving me fits. It used to display all the items in the list properly - one image, and three text fields. Now, it randomly will stop displaying one item.
When I say random, I don't mean that it switches around when you refresh the page - I mean right now item #4 isn't being displayed (even in source code, nothing appears). But if I were to delete any other item, that #4 might just show up again, and a different item start disappearing.
I'm at a loss here. I see no special characters in the text fields. Even if there were, that wouldn't explain how an item will work then not work then work again based on making changes to other items.
Please let me know what other information I can provide to assist in troubleshooting this.
Below is all the relevant code I can think of.
Template:
<div id="content">
[[!getImageList?
&tvname=`management`
&docid=`[[*id]]`
&tpl=`management_tpl`
&limit=`0`
]]
<div class="clear"></div>
</div><!-- #content -->
management_tpl:
<div class="management_box">
<div class="management_img">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
</div>
<div class="management_content">
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+descr]]
Show more
</div>
<div id="[[+name:stripString=` `]]" class="fulldescr">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+fulldescr]]
</div>
<div class="clear"></div>
</div>
Thanks,
Chris
For anyone who finds this in the future - my MIGX plugin was outdated and had some flaws that caused this. Updating the plugin fixed everything.