Been tasked with the above title, found the logo, and how to create a custom html module. How should I proceed?
I cant edit the index of the site directly, unless theres a way to do it in joomla.
I'm not the most knowledgeable on front-end design standards, but I'd think some sort of CSS media query would do the trick.
Joomla 3 is based on Twitter Bootstrap. There are CSS helper classes such as ".hidden-phone" - try adding that to you module CSS (without the dot). If the template was developed by someone else, ask them to tell you what is the exact CSS class you should use.Check documentation
Not knowing which template you're using (some templates simply don't load bootstrap) but assuming you've bootstrap loaded, you need to edit the css file in your template directory - templates/your_template/css/your_css_templatename.css
Here, you should use the media queries and find the #media that you would like to change. Bellow the examples. Then, inside the one(s) that you may figure out will suit your needs, set the logo id selector and the attribute to display: none; (example below)
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) {
#your_logo {
display: none;
}
}
The options above will work even if bootstrap not loaded. If you have bootstrap loaded and you're able to set the class attribute in the logo, you can use the .hidden-phone utility class.
Related
I am trying to make the back button icon white in the toolbar of my Ionic 4 app. I have added:
ion-back-button {
--color: white;
}
in my global.scss, but the icon persists in being grey. I have managed to make my toolbar title white.
This is my template:
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
I'd like to be able to simply define a global style to change the colour of all back buttons globally without having to add additional markup to every page with a back button.
Try it in the global.scss with important
ion-back-button{
--color: white !important;
}
Placing it within :root works as well per the docs:
https://ionicframework.com/docs/theming/css-variables#setting-values
:root {
ion-back-button {
--color: red;
}
}
Add the following styles in the global.scss
ion-icon.sc-ion-back-button-md , ion-icon.sc-ion-back-button-ios
{
color: #fff !important;
}
I had this problem just now, the --color variable just doesn't seem to work, however setting color instead with the !important flag did.
Here is what I did, note the focused and hover variables do seem to work if you need to change these.
ion-back-button {
color: #fff !important;
--color-focused: #fff;
--color-hover: #fff;
}
I had this same problem. No matter what I tried, I could not change the color of the ion-back-button from gray. So, I used the Chrome developer tools to inspect the element and learned that a theme for a third-party module that I had loaded was applying that gray color to all span tags. Fortunately, I no longer needed that module, so the answer for me was to simply remove the reference to the theme.
The module that was causing this problem was AWS Amplify.
I am posting this "answer" here to help you or anyone else take a "next step" in resolving this "maddening" problem: use Chrome developer tools to inspect the back button element in the DOM to identify the CSS rule that is being applied.
Check your variables.css file there is should be #media (prefers-color-scheme: dark) section that relates to dark theme colors. Also you need set color light to ion-back-button.
I have developed a Responsive website in Joomla 3 using the protostar template as default. Its a responsive page. I have created Main menus. I am trying to resize the Screen to 480 (mobile) the menus are not changing into Drop Down.
NAV-COLLAPSE DOESN'T HAPPEN. even though i have given # media.
If i Change the template to ISIS Template nav-collapse works.
my css:
#media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0,0,0);
}
Does anyone know of a firebug like debug tool that will notify user of which #media tag they are currently viewing in?
It would clear up any confusion as to where user should be debugging in the code.
Using the latest Bootstrap (as of today).
Secondly this brings me to the main issue, when the screen size changes elements shift on the screen as expected, however 1 div shifts out in the wrong direction when the screen changes. Observing firebug, no html/css code changes.
So this must be JS? either way where to begin tracking the fault?
You could create a dummy element for each selector that you can then inspect using JavaScript and examine its value.
For example:
<div id="media-version"></div>
#media-version {
content:"Full Width";
display:none;
}
#media all and (max-width: 699px) and (min-width: 520px){
#media-version {
content:"520-699 width";
display:none;
}
}
alert($('#version').css('content'))
You'd have to change the content within each media query.
I am creating a website which has the following code in it.
<style>
.browser_logo{
width:100%;
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
The image is about 1000px width which is extreme but it needs to be. The problem is that it is only 52px width in Safari. It is correctly displaying in Chrome, Firefox, Opera and even in IE. I have been looking the entire evening for Safari hacks but everything I find also changes the output in the Chrome browser. When I remove the width 100% or basically the style part then it shows the entire image as it should in safari. But then it will no longer be responsive. Any help would be greatly appreciated.
I have added the following to the style part above. Which makes it work but it is an ugly hack so I still would like to know how to do it properly.
This is the new code. I have used the screensizes from http://www.websitedimensions.com/
<style>
#media screen and (min-width:310px) {.browser_logo{min-width:310px;}}
#media screen and (min-width:468px) {.browser_logo{min-width:468px;}}
#media screen and (min-width:750px) {.browser_logo{min-width:750px;}}
#media screen and (min-width:989px) {.browser_logo{min-width:989px;}}
#media screen and (min-width:1010px) {.browser_logo{min-width:1010px;}}
#media screen and (min-width:1117px) {.browser_logo{min-width:1117px;}}
#media screen and (min-width:1245px) {.browser_logo{min-width:1245px;}}
#media screen and (min-width:1405px) {.browser_logo{min-width:1405px;}}
#media screen and (min-width:1645px) {.browser_logo{min-width:1645px;}}
#media screen and (min-width:1885px) {.browser_logo{min-width:1885px;}}
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
Why not just set .browser_logo { width:100%; } instead of using all of those media queries?
Perhaps it would be easier to understand what you were trying to do if you put it in a jsfiddle, or showed us the live link?
I am working on a fixed width legacy site and want to create a more optimal experience for tablet users by implementing a couple adaptive layouts. The first layout will be a 600px wide design and it will be displayed on devices with 600px - 768px screen widths. The second adaptive layout will be a 769px wide design and it will be displayed on devices with 769 - 1023 screen widths.
I want to know how I can use the viewport meta tag to make the designs scale up to fit into mobile browsers with widths larger than the original design.
For example, when the 600px design is viewed on a device with a 768px browser screen width, how can I make the smaller design take up the full width of the screen?
I have found a lot of information about adaptive layouts for websites with fluid grids, but nothing that specifically talks about the relationship between design width and viewport sizes for fixed width sites - at least not one that I can understand.
It is called responsive web development.
First step is to put below tag in your code inside head tag part.
For responsive design use media queries:
Now use the media queries, here is good example of media queries . Also learn how to use it.
Here is small snippet of code which will guide you how to use:-
<style>
.clear{ clear:both;}
/*this will work for desktop*/
#media only screen and (min-width: 801px){
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for tablet*/
#media only screen and (max-width: 800px) and (min-width: 521px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for mobile*/
#media only screen and (max-width: 520px) and (min-width: 320px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
</style>