Integrating my blogspot header to Smugmug.....

Michaëlus_Ludovicus · May 16, 2020

......to make it seamless

Hi, I would like to take my Blogspot header here https://michaelus-ludovicus-medias.blogspot.com/ and integrate it in my smugmug here https://michaelus-ludovicus-medias.smugmug.com/ but i don't know how to do it.

if you have any advise please let me know, thank's.

Sorry, i would like to insert some URL and screen shots but no text formating buttons to be founded here. Is there something wrong or it is just me?

Hikin' Mike · May 16, 2020

I use WordPress so I can't help, but @denisegoldberg uses Blogger, so hopefully she can help you.

denisegoldberg · May 16, 2020

I actually used the SmugMug tools to create a header with site name on one side and menu items on the other. I looked at the code in a web browser and copied it to my Blogger template.

On your question about inserting URL and screen shots, that functionality is limited when you initially join the forum. The restriction is lifted after you post a number of comments / threads and after a short period of time has passed.

Michaëlus_Ludovicus · May 16, 2020

Thank you @Hikin' Mike appreciated!

Michaëlus_Ludovicus · May 17, 2020

> @denisegoldberg said:
> I actually used the SmugMug tools to create a header with site name on one side and menu items on the other. I looked at the code in a web browser and copied it to my Blogger template.
>
> On your question about inserting URL and screen shots, that functionality is limited when you initially join the forum. The restriction is lifted after you post a number of comments / threads and after a short period of time has passed.

Hi @denisegoldberg thank you i understand better now for the forum.
I hope to be able to take the already customized double navigation header from my blogspot template and put it on top of my smugmug portfolio in the smugmug customization section.
But when it is time to make it look the same in smugmug i have difficulties to find the CSS code that will do the magic!
If you have more suggestions it is very appreciated, i thank you very much!

Michaëlus

denisegoldberg · May 17, 2020

@Michaëlus_Ludovicus said:
Hi @denisegoldberg thank you i understand better now for the forum.
I hope to be able to take the already customized double navigation header from my blogspot template and put it on top of my smugmug portfolio in the smugmug customization section.
But when it is time to make it look the same in smugmug i have difficulties to find the CSS code that will do the magic!
If you have more suggestions it is very appreciated, i thank you very much!

If you want to copy the header from your blog to smugmug you will need to use CSS.

In Blogger, if you select Theme on the left side (when you are logged in) you should be able to click Edit HTML to see the HTML for your blog. Blogger shows the HTML and the CSS in the same "file". The CSS is in lines that are hidden from view. You will need to use the triangle/arrow to open that section of the code. In order to take the code to your SmugMug site you will need to identify the HTML and the CSS and you will need to customize your SmugMug site to use the code. If you are not familiar with code you may want to see how close you can get the site using the standard SmugMug customization capabilities.

Michaëlus_Ludovicus · May 18, 2020

Thank you @denisegoldberg as you can see at the 2 places:
https://michaelus-ludovicus-medias.smugmug.com/ i'm missing the little "Home" icon on the bottom-header.
https://michaelus-ludovicus-medias.blogspot.com/
It look almost the same.

Hikin' Mike · May 18, 2020

@Michaëlus_Ludovicus said:
Thank you @denisegoldberg as you can see at the 2 places:
https://michaelus-ludovicus-medias.smugmug.com/ i'm missing the little "Home" icon on the bottom-header.
https://michaelus-ludovicus-medias.blogspot.com/
It look almost the same.

I might be able to help you finish your project. The 'Home' and 'Search' icons are fonts, specifically called 'FontAwesome'. Unless you have a way to upload that font to your site, you're going to have to use SmugMug's icons. If you add this to your site, those two icons will display.

.fa-home::after,
.fa-search::after {
  font-family: 'SmugMug Icon Font Regular'; 
  font-style: normal;
  line-height: 12px;
}

.fa-home::after {
  content: '\E317';
  font-size: 32px;
}

.fa-search::after {
  content: '\E315';
  font-size: 16px;    
}

Michaëlus_Ludovicus · May 18, 2020

@Hikin' Mike said:

@Michaëlus_Ludovicus said:
Thank you @denisegoldberg as you can see at the 2 places:
https://michaelus-ludovicus-medias.smugmug.com/ i'm missing the little "Home" icon on the bottom-header.
https://michaelus-ludovicus-medias.blogspot.com/
It look almost the same.

I might be able to help you finish your project. The 'Home' and 'Search' icons are fonts, specifically called 'FontAwesome'. Unless you have a way to upload that font to your site, you're going to have to use SmugMug's icons. If you add this to your site, those two icons will display.
.fa-home::after,
.fa-search::after {
  font-family: 'SmugMug Icon Font Regular'; 
  font-style: normal;
  line-height: 12px;
}

.fa-home::after {
  content: '\E317';
  font-size: 32px;
}

.fa-search::after {
  content: '\E315';
  font-size: 16px;    
}

Thank you very much @Hikin' Mike , very helpfull and appreciated.
Here some details i noticed !

Also I'm exploring the possibility to go with other webside solutions like wordpress, I thing this site https://stuckincustoms.com/ , I like the intro video, the menu that start to the bottom of the intro and stick to the top when scrolling, it is large, well structured and seams to be integrated with smugmug.
What are your thoughts about it?
I was thinking Goddady or BlueHost to maybe start with Wordpress.

Hikin' Mike · May 18, 2020

@Michaëlus_Ludovicus said:
Thank you very much @Hikin' Mike , very helpfull and appreciated.

I don't see that you've added the SmugMug icons

@Michaëlus_Ludovicus said:
Here some details i noticed !

Looks like you've taken care of that.

@Michaëlus_Ludovicus said:
Also I'm exploring the possibility to go with other webside solutions like wordpress, I thing this site https://stuckincustoms.com/ , I like the intro video, the menu that start to the bottom of the intro and stick to the top when scrolling, it is large, well structured and seams to be integrated with smugmug.
What are your thoughts about it?
I was thinking Goddady or BlueHost to maybe start with Wordpress.

I use WordPress for my website (https://www.imagesinthebackcountry.com/). I only use SmugMug for my galleries (https://gallery.imagesinthebackcountry.com/). I started with a free WordPress theme and customized it to my tastes. I then customized my SmugMug site to match. I created a sub-domain and that's where my SmugMug "lives".

IMO, Trey's site does NOT integrate well. I see two different websites when I looked at his page.

I can't recommend GoDaddy and I'm not familiar with BlueHost. I've been using ICDSoft to host both of my websites for over 20 years without any issues.

Michaëlus_Ludovicus · May 19, 2020

Hi @Hikin' Mike , thank you.
I have changer quite a bit the top banner (middle-header) here and there .
So now I am searching how to make it keep the same width aspect ratio and make the eight adapt on different screen sizes.
Thank for all your help @Hikin' Mike and @denisegoldberg .

Michaëlus🐝Ludovicus

Michaëlus_Ludovicus · June 4, 2020

Hi @denisegoldberg . I have completly changed my customization approach in a more simple way as you can see here. Before I was trying to integrate my blogspot header navbar into smugmug, it was not doing good, but now I'll try to do the reverse: integrating the smugmug header navbar that I have just customed into my blogspot blog. In order to do it and make it appear and react (sticky on top) I have to isolate the specific Smugmug code (HTML, CSS, Script...?) and put somewhere in the blogspot HTML changes interface.

If you have any suggestions your help will greatly appreciated. Thank you very much.

denisegoldberg · June 4, 2020

@Michaëlus_Ludovicus said:
Hi @denisegoldberg . I have completly changed my customization approach in a more simple way as you can see here. Before I was trying to integrate my blogspot header navbar into smugmug, it was not doing good, but now I'll try to do the reverse: integrating the smugmug header navbar that I have just customed into my blogspot blog.

I created my header in SmugMug with a combination of a Logo content block and a Menu content block.

I used the Firefox Web Developer tool to view and copy both the CSS and the HTML for Logo / Menu content blocks.
I then went into Blogger, on the page that I posted above, selecting Theme from the side bar, and Edit HTML on the Theme page.
I placed the HTML on that page:

I then clicked the black triangle on line 11 to open up the CSS section.
I scrolled down to find what felt like a sensible spot to place my nav CSS and pasted it there.

I hope this helps point you in the right direction.

Michaëlus_Ludovicus · June 5, 2020

@denisegoldberg thank you very much. I'll try to do exactly as you did.

Integrating my blogspot header to Smugmug.....

Comments