I'm sure that there's an easy solution to my problem, but for the life of me I can't work out what I'm doing wrong.
I'm trying to get bootstrap-lightbox working in my site (which is a Django app, if that makes any difference).
I have the following in my header:
<script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="static/dash/bootstrap-lightbox.js"></script>
<script src="static/dash/excanvas.min.js"></script>
<script src="static/dash/bootstrap.min.js"></script>
<script src="static/dash/jquery.flot.min.js"></script>
<script src="static/dash/jquery.gritter.min.js"></script>
<script src="static/dash/jquery.flot.resize.min.js"></script>
<script src="static/dash/jquery.peity.min.js"></script>
<script src="static/dash/fullcalendar.min.js"></script>
<script src="static/dash/unicorn.dashboard.js"></script>
<script src="static/dash/unicorn.js"></script>
<script src="static/dash/custom.js"></script>
<link rel="stylesheet" href="static/dash/bootstrap.min.css" />
<link rel="stylesheet" href="static/dash/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="static/dash/fullcalendar.css" />
<link rel="stylesheet" href="static/dash/unicorn.main.css" />
<link rel="stylesheet" href="static/dash/jquery.gritter.css" />
<link rel="stylesheet" href="static/dash/unicorn.grey.css" class="skin-color" />
<link rel="stylesheet" href="static/dash/bootstrap-lightbox.css" />
And in my HTML:
<a data-toggle="lightbox" href="#worldlightbox" class="thumbnail"><img src="/static/img/pics/bg/thumbs/WorldThumb.jpg" alt=""></a>
<div class="lightbox" id="worldlightbox" style="display: none;">
<div class='lightbox-content'>
<img src="/static/img/pics/bg/World.jpg">
</div>
When I click the link image, nothing happens at all. There are no errors in the console and the scripts are loading correctly.....
I'm pretty sure there's some conflict somewhere as none of the lightbox plugins I've tried have worked.
If someone can show where I'm going wrong, I'd be really grateful!!
I am sorry this is so late, but I just had the problem myself. The simple answer for your problem is that the lightbox is just not working the way it should be. And the help is scant and incomplete. I don't know how the developer ever got their example to work. But I got mine to work, and it should work for you too:
<ul class="thumbnails" style=" position:relative; top: 110px; display:block;">
<li class="span2">
<a data-toggle="lightbox" href="#carouselLightBox" class="thumbnail">Open Lightbox</a>
</li>
</ul>
<div class="lightbox fade" id="carouselLightBox" style="display: none;">
<div class='lightbox-content'>
<img src="/content/images/mapicons/cad.png" alt="" />
</div>
</div>
For whatever reason, putting your 'a' tag inside the 'ul' with the class name thumbnails, then naming your 'a' tag class thumbnail makes it work. Hopefully Django will take the time to fix this issue soon...
Related
So, my navbar is saved as a partial in a fairly straightforward express app. I have the navbar also included in a boilerplate wrapper which is being used on most pages, like so:
<h1>HELLO<h1>
and in the boilerplate file I have
<%- include("../partials/navbar")%>
The problem is that the navbar shows up but the two .svg images don't show on certain pages, which to my eye are using the exact same format. Does anyone have any ideas what the problem might be?
Also, please let me know if I can clarify anything - I'm quite fresh to coding so I'm a bit limited in my vocabulary.
Thanks in advance!
EDIT(nowhere near enough infomation, sorry):
here is the code for navbar partial:
<nav class="navbar navbar-expand-md sticky-top navbar-dark">
<img class="brand" src="logo.svg" alt="" />
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-link ms-3" href="/events">Upcoming Events</a>
<a class="nav-link ms-3" href="/events/new">New Event</a>
<a class="nav-link ms-3" href="/community">Community</a>
</div>
<div class="navbar-nav ml-auto rightLinks" id="navbarSupportedContent">
<% if(!currentUser) { %>
<p><%= currentUser %></p>
<a class="nav-link" href="/login">Login</a>
<a class="nav-link" href="/register">Register</a>
<% } else { %>
<a class="nav-link" href="/logout">Logout</a>
<p class="nav-link">
<%=currentUser.username %><img class="profileIcon" src="profile.svg"></img>
</p>
<% } %>
</div>
</div>
</div>
</nav>
and here is the boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style2.css" />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Anton&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Street Music</title>
</head>
<body class="flex-column">
<%- include("../partials/navbar")%>
<main class="containter vw-100"><%- body %></main>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<!-- <script src="/javascripts/validateForms.js"></script> -->
</body>
</html>
Maybe I should mention that the pages in which the images show up are in the same directory, and the images themselves are in public.
Each file begins with <% layout("layouts/boilerplate") %> but it only displays the images on certain pages.
first:-
img tag doesn`t have a closed tag so this is wrong
<img class="profileIcon" src="profile.svg"></img>
you should delete the closed tag to be like that
<img class="profileIcon" src="profile.svg">
second:-
you mentioned that the images is in anther directory and you didn`t route them in src
src="profile.svg"
to make the route correctly there is two ways :-
first :-
src="../public/profile.svg"
second:-
if you use express ,you can do static file to your public file in server.js like so
app.use(express.static('public'))
and then you can route directly to the public directory
src="./public/profile.svg"
I am making a bootstrap site for my sister and everytime i want to change css it works or 90% of the time it don't work.
I made a new file "style.css" to overwrite bootstrap i placed it under all the other tags in my and it still doesn't work can someone explain please?
Thanks
EDIT:
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section>
than i have in the bootstrap css file this line:
section{
padding: 6rem 0;
}
I want to change that to 9 rem so in my custom css file:
section{
padding: 9rem 0;
}
i does nothing ): and that is just one example maybe i do something very very stupid but i don't think so. and its not the cache.
head:
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- tab icon -->
<link rel="icon" href="img/logo_1.png">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Thanks
Maybe your webpage is still cached, try to hit ctrl + f5 to check if it is presesting.
Otherwise just use the !important keyword in your css styles. down below you will find an example of how to use an !important statement.
.row {
padding: 15px !important;
margin: 10px auto !important;
}
An important statement overwrites files even if they come after the execution stack of the dom.
Here is some more information of the usage : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types
Edit:
Be aware that the import keyword is hard to work around with when you want to change this later, for your specific case it would be fine. But if it is for bigger clients and projects, watch your important keywords ;).
Using your same imports I don't see Bootstrap's CSS having any paddings on the section tag, the styles you defined are applying correctly, maybe it's a different stylesheet that's causing this?
Also note you are importing Bootstrap CSS twice, and maybe for different versions of it? Try deleting the import you are not using. In fact, try deleting one css import at a time to see when the problem goes away, that'll at least help you find which stylesheet is overriding your styles
section {
padding: 9rem 0;
}
<head>
<!--there is some more here but not nessecary-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!--icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">About</h2>
<hr class=" mb-5">
<div class="row">
<p class="lead">some text...</p>
<p class="lead">some text...</p>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fas fa-download mr-2"></i> Download Now!
</a>
</div>
</div>
</section>
Scenario :
I cannot make my asp:DropDownList style correctly.
It works perfectly but it doesn't match the rest of the form. Specifically, the rest of the form has a smaller footprint, no background, and a border.
Todo :
We want dropdowns with a border and white background (like those found on bootstraps form page) (I am sorry - I can't post images yet).
Tried Case :
To debug, I made a naked page with only a dropdown and a text box to compare to. Here is that code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/bootstrap-select.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css">
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.structure.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.theme.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="col-5">
<asp:TextBox runat="server" id="notmuch0" CssClass="form-control"></asp:TextBox>
<asp:DropDownList ID="DropDownList1" CssClass="form-control-sm" runat="server"><asp:ListItem>1</asp:ListItem></asp:DropDownList>
</div>
</form>
<!-- Javascript-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
<script src="js/popper.min.js"></script>
</body>
</html>
When we run the code, it creates the following mess for the drop down:
<div class="col-5">
<input name="notmuch0" type="text" id="notmuch0" class="form-control">
<select name="DropDownList1" id="DropDownList1" class="form-control-sm select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1">1</option>
</select><span class="select2 select2-container select2-container--bootstrap select2-container--below" dir="ltr" style="width: 48px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-DropDownList1-container"><span class="select2-selection__rendered" id="select2-DropDownList1-container" title="1">1</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>
And it looks the wrong way still (no border, still a background)
I have tried working with the bootstrap selectpicker - but it seems that .net ignores EVERYTHING we do to change the class.
I have about 4 hours of research into this - and still nothing Can you help please? Will try anything.
Please suggest. Thank you.
Try remove jquery-ui.
Only use bootstrap.
I can't seem to figure out why my header background will not show. I cut out a large amount of images and content in the html but here is my code - Please let me know if you know why my header image will not show. Thank you
Here is the html:
<DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>fbgfbmgkfnf</title>
<link rel="stylesheet" type="test/css" href="css/style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet" href="js/jquery.galleryview-3.0-dev.css" />
</head>
<body>
<center>
<div id="header">
<div id="cf">
<a href="index.html">
<img class="bottom" src="images/nav/home1.png" />
<img class="top" src="images/nav/home.png" /></a>
</div>
</div>
And this is my CSS:
#header {
background-image: url(images/tweed1.png);
}
You need to go back a folder for your images. Change your CSS to the following.
#header {
background-image: url(../images/tweed1.png);
}
Seems to be a problem with the css-file:
Trying this will work, please try to add 'brackets' or change the url with something that exists like
htt*://jsfiddle.net/xbAGj/
I am trying to write my first ASP.NET website and I really want to use the Twitter Bootstrap but I'm failing at the first hurdle.
I downloaded the Zip file from here, unzipped it and added the files to my solution and the following lines to my _LAyout.cshtml file:
<link href="#Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>
Here is a screenshot showing the above files in my solution:
I am trying to create a menu bar across the top with this code which was taken from this turorial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<h3>Present Ideas</h3>
<ul>
<li>Blog</li>
<li>About</li>
<li>Help</li>
</ul>
<ul class="nav secondary-nav">
<li class="menu">
Account Settings
<ul class="menu-dropdown">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
<footer>
</footer>
</div>
</body>
</html>
What I get, instead of the horizontal bar is this:
I would appreciate any help to get me started with what promises to be, an excellent framework.
You're using Twitter Bootstrap 2.0, but the tutorial was written for Twitter Bootstrap 1.0, there has been quite a few changes to the markup you need to use to get the desired look.
It explains some of the changes to the navbar component in the changelog, there are also some basic examples of how it is done now:
http://getbootstrap.com/2.3.2/getting-started.html#examples
http://getbootstrap.com/2.3.2/components.html#navbar
Also (unrelated to the question), you're including both the minified version and the standard version of the css/js, you only need to include one of each.