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
Related
I am creating a website using the bulma.io framework. One of the advantages of Bulma is that it's very responsive to changing the size of your screen, which makes it great for mobile.
However, for me, I don't want this functionality. I want the site on mobile to look exactly the same as on desktop, simply zoomed it so the viewer can still see what they want with the right layout.
I'm not at all a CSS/HTML/JS expert and I'm very new to web design, but I was wondering if anyone has a solution for this?
By default, columns are only activated from tablet onwards. This means
columns are stacked on top of each other on mobile. If you want
columns to work on mobile too, just add the is-mobile modifier on the
columns container.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
<div class="columns is-mobile">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
https://bulma.io/documentation/columns/responsiveness/
I have been using display.none, for the hid-whens for example, all the hidden fields were kept in a section and section was hidden from web by using Display.none.
This is working for Internet Explorer till IE 9, but for IE 10 all the hidden fields are shown.
Can anyone help in this matter. Any alternative or approach.
Without seeing the page it sis very difficult to guess.
Try validating the html through one of the many online html validators as something may not be closed or Notes might have given you an unwanted code addition .
Try adding a background color to the css #wrapper to make sure the css is being called.
Take a copy of the form and start removing all other elements one section at a time to see if something else is causing the issue.
Add {meta http-equiv="X-UA-Compatible" content="IE=10;IE=9; IE=8; IE=7; IE=EDGE" /} as the very top meta tag and see if that fixes it. Replace the curly braces obviously.
All the best in finding the issue.
It sounds like just the section element is getting hidden. Without seeing the code I can't tell why that changes between ie 9 and 10 but ie is famous for having varying behavior between versions.
One alternative that comes to mind: You could wrap the section and the fields in a DIV element using pass thru HTML and set that div's style to display:none. That is pretty standard and should work across browsers.
Update: To give you an idea what I'm talking about, check out this jsfiddle.
HTML:
<form>
<div class="wrapper">
<input type="text" name="Field 1" /><br />
<input type="text" name="Field 2" /><br />
<input type="text" name="Field 3" />
</div>
<span>Some text that won't be hidden.</span>
</form>
CSS:
.wrapper {
#display:none;
}
You can remove the # next to the display:none and see the difference, even in IE 10.
You'll need to look closely at the HTML being rendered by Domino and make sure that in fact all the fields you are trying to hide are surrounded by the DIV that is hidden.
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.
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.