I have a simple question: I am currently creating my portfolio in html
I wish that by clicking on the image, I can write the description of my choice. For the moment it shows me this:
I give you the party of the corresponding code below.
Thank you again for your help !
<!-- item -->
<div class="project-item">
<!-- ==> Put your thumbnail as a background -->
<a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
<!-- project-description -->
<div class="project-description-wrapper">
<div class="project-description">
<!-- project name -->
<h2 class="project-title">Project Title</h2>
<!-- /project name -->
<span class="see-more">Project Tags</span>
</div>
</div>
<!-- /project-description -->
</a>
</div>
<!-- /item -->
I don't know what framework (if at all) you're using, but my go-to solution for creating websites, is MaterializeCSS.
And oh look, they got something that exactly matches what you want (as far as I can understand, let me know if it doesn't).
Here it is:
<!-- MATERIAL BOXED-->
<h1>MATERIAL BOXED</h1>
<img src="http://materializecss.com/images/sample-1.jpg" alt="" class="materialboxed" data-caption="Here is an image caption">
The only change that you must do in your code, is to import the Materialize library and jQuery necessary, all of which are in their official page.
Hope this can help you solve your problem, it might look a bit un-orthodox but it gets the job done, at looks pretty nice doing so ;)
Related
I am working on a wordpress website with the wordpress personal plan (no option to use plugins and no option to edit the CSS code). I assumed creating a sticky header in wordpress would be a matter of turning on a switch in the header menu, but it seems more difficult than I thought. I now got into the Code editor menu of the header in which I think it may be possible to make the header stick, but any other recommendations are more than welcome.
I have tried going through the entire header settings and options menu to see if I could find a way to make the header stick, but without success. I've also tried Googling solutions but everything I could find included either using plugins or editing the CSS code which I am both unable to do given the plan I'm using. Now I found the Code editor of the header and footer, in which I think it might be possible to make the header stick, but I haven't been able to figure it out yet. The current Code editor code is:
<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true","type":"constrained"}} -->
<div class="wp-block-group gapless-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dgap\u002d\u002dvertical)","top":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dgap\u002d\u002dvertical)"}}},"className":"site-header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull site-header" style="padding-top:var(--wp--custom--gap--vertical);padding-bottom:var(--wp--custom--gap--vertical)"><!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
<div class="wp-block-group site-brand"><!-- wp:site-logo {"width":64} /-->
<!-- wp:group -->
<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"letterSpacing":"3px","textTransform":"capitalize","lineHeight":"1.2"}},"fontSize":"x-large"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:navigation {"ref":749,"className":"social-links","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|50"},"typography":{"fontSize":"1.3rem"}}} /-->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#00a54f"},"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}},"border":{"radius":"5px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://kungfuhaarlem.com/contact/" style="border-radius:5px;background-color:#00a54f;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">Gratis proefles!</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
I cannot figure out what I am missing here. (Head included for bootstrap reference.)
<head>:
<!-- Bootstrap Complete CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></script>
<!-- Bootstrap Complete JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap Complete JavaScript Bundle -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
Problematic code:
<!-- TopGrid -->
<section id="TopGrid">
<div class="row">
<div class="TopGrid-Box col-lg-4">
<img class="Mask" src="Images\Mask Icon.png" alt="Lineart Face Mask">
<h2>Masks</h2>
<p>Our associates will be wearing masks, and you will be asked to do the same while shopping in our stores. </p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Hands" src="Images\Hand Cleaning Icon.png" alt="Lineart Hand Sanitizer">
<h2> Hands</h2>
<p>Hand sanitizer will be provided as you enter so we can maintain safer shoe displays. Our asociates will also be regularly using sanitizer as well as washing their hands
throughout the day.</p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Surface" src="Images\Surface Cleaning Icon.png" alt="Lineart Cleaning Spray">
<h2> Surfaces</h2>
<p>Our associates will be disinfecting all high-touch surfaces throughout the day, as well as before and after customers.</p>
</div>
</div>
</section>
I am not getting columns at all. Removing the images doesn't affect it, adding a container doesn't affect it, adjusting screen size does not affect it. I'm sure I'm missing something simple, but I don't know what it is.
(There is no CSS currently written for this code, except for the inline bootstrap.)
I can't get glyphicons to show up. Currently, a small square shows up instead of the glyphicon. I've tried moving folders, etc. I didn't do custom bootstrap - I just downloaded the whole thing, so there shouldn't be any errors/anything missing. Here's my code:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Welcome!</h2>
<p>
</p>
</div> <!-- heading div -->
</div> <!-- row -->
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="interests">
<span class="glyphicon glyphicon-camera">
</span>
<h4>People</h4>
</div> <!-- interests divs -->
</div> <!-- column divs -->
</div> <!-- row -->
</div> <!-- container -->
Am I missing something at the top that needs to be included to get the fonts to show up? In the head, I have a link to the bootstrap.min.css - should I be linking to anything else?
I'm guessing its's not showing for 2 possible reasons:
1. You have not installed the fonts
2. You have not added the font folder hence bootstrap cannot load the glyphicons.
fonts----a folder containing fonts
css------a folder containing bootstrap css files.
index.html-----this file should link to the href="css/bootstrap.css" which intern calls the fonts files
You may check the following images (2 images).
Or, you can check those fonts.
https://github.com/twbs/bootstrap/tree/master/dist/fonts
Hope it helps.
I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.
For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html
and I want try to create a WP template starting by it.
Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?
Is it the right way?
The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)
Can you give me some ideas about how do these things?
Tnx
Andrea
I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/
The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.
As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.